Best Practices Magento css files

Question

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.

Answer 1

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.

Answer 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.