3

I have a few questions about the css files delivered with magento and the best practices to do changes in them.

First of all I was not able to find a basic description for all the css files coming with magento. For example when is the reset.css file used?

But my bigger question is, why magento is doing almost everything in the styles.css by default? Wouldn't it be a better idea to split the css into several smaller files and load those in the local.xml file for the different views? This allows for more control over the styling of the elements.

For example one could create a css file for simple product views and load the file in local.xml and another one for grouped products.

Another question i have is, about the -moz-* styles. Why are they in the styles.css and not in a firefox specific css file? If I use Opera (or any other browser) they show this styles as errors because they don't know about them.

  • In regard to the bloated styles.css, I believe it's just that Magento isn't following frontend best practice in this instance. – kalenjordan Apr 30 '13 at 13:17
2

But my bigger question is, why magento is doing almost everything in the styles.css by default? Wouldn't it be a better idea to split the css into several smaller files and load those in the local.xml file for the different views? This allows for more control over the styling of the elements.

No it would not be better. Separate CSS files would result in more HTTP requests which would slow down your website. I believe you have 2 options here:

1) Stay with 1 big CSS file but minify it

2) Split them up in several smaller files to increase the readability for yourself and have them automatically combined by using the Fooman Speedster Magento extension.

Another question i have is, about the -moz-* styles. Why are they in the styles.css and not in a firefox specific css file? If I use Opera (or any other browser) they show this styles as errors because they don't know about them.

AFAIK it's considered general practice to do it this way. There are more disadvantages on writing each browser specific style in separate file.

For example just add it like this for rounded corners:

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

Depending on which browser the visitor is using the corresponding style will be applied. Browsers who don't support these properties will just show you square corners.

  • I'm not actually sure myself, but I would think it would be better practice to break stylesheets up more logically as suggested by the OP. I'm guessing the reason it's done that way in the Mage core is simply that some frontend best practices have always been lagging. Using CSS merging or Fooman you should be able to merge and minify, eliminating HTTP request overhead. – kalenjordan Apr 30 '13 at 13:16
  • I'd agree that it is easier to have multiple stylesheets. We find this easier when having multiple developers on the CSS with version control systems. Usually break it apart by section (product.css, categories.css, checkout.css, etc.). While this has more http requests, it makes it much easier to work with files. Also you can avoid the IE css selector limit on larger projects. blesscss.com You can always run a combining/minifier after all css is complete to make it one http request. – Mark Shust May 23 '13 at 18:38
2

You've got to look at this from both sides.

  • The browser, downloading and rendering the content
  • The developer, writing/editing/managing CSS

A browser wants as few files as necessary, combined and minified. As well as ideally having as little and as simple CSS as possible (ie. not having 1+ levels of hierarchical dependency) .

But a developer may struggle to manage everything in one document, or find it less productive to work like that.

This is really why CSS processing (eg. SASS/LESS) exists. So that you can have straightforward, clean and commented CSS, structured however you like, but what the browser gets is a combined file and optimised file. So this gives you the best of both worlds.

Realistically, you only need 2 style sheets (print and screen) - although newer browsers can just do this via media queries.

As far as CSS input is concerned, do whatever makes development most comfortable for you. But as far as output is concerned, try and ensure you have as few files, optimised and de-duped as possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.