Magento – Best Practices Magento css files

best practicecss

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.

Best Answer

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.

Related Topic