How to Manage CSS in Magento 1

How to Manage CSS in Magento 1

Today we’d like to represent a sort of tutorial that describes how to add CSS files in Magento. Hope you’ll find the article useful and gain new skills while dealing with CSS files.

How to add CSS

CSS files are usually located at skin/frontend/our_package/our_theme/css. In fact, there are 4 ways to add CSS files to HTML:

Linking to a separate CSS file

Embedding CSS into the HTML

Adding inline CSS to HTML tags

Importing a CSS file from within CSS

CSS Merging

In order to merge CSS files into single HTML, you need to go to the admin panel and select System – Configuration

how to manage css in Magento 1_1

On the left menu, you need to select Developer, then open CSS Settings and change Merge CSS File into Yes, click Save Config and clear cache.

how to manage css in Magento 1_2

Note. The styles break in case there are inline resources url('data:...') in the code.

CSS Compression

First off, you need to create the browser list (every website has its own visitors who may use different browsers, so with the help of analytics you can define these browsers and form your own list of supported browsers).
Using the plugin postcss-remove-prefixes, you should remove pesky vendor prefixes. So it makes sure any CSS code will be optimized in the next step according to the browser list that has already been formed.
Add just specific prefixes for CSS using autoprefixer. Do not forget to define the list of supported browsers created earlier.
It’s necessary to perform minification. Actually, there are many different minificators you can use.

Other CSS skills

There are following types of selectors in CSS:

  • Simple
  • Combined
  • Universal
  • Type
  • Class
  • ID
  • Combinators
  • Descendant
  • Child
  • Adjacent Sibling
  • Attribute
  • Pseudo-classes
  • Pseudo-elements

As for the rules of priority (specificity), they are usually represented by weight like that:

  • Attribute = 1000
  • ID = 100
  • Class = 10
  • Elements = 1
    When two selectors have the same weight, the browser will render the last
    declared one on the styles sheet, what “cascading” means.

There are general methods of speed optimization related to CSS:
– Compress CSS
– Combine CSS files
– Split styles according to Media Query Breakpoints
– Remove all unnecessary vendor prefixes



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *