Formatting and load times

Question

I have been reading a bit on compressed and uncompressed CSS files, but I haven't seen anyone talk about specific formatting in a CSS file.

Should you group things together like this:

.class1,
.class2,
.class3, .... {
    color: [color];
    background: [image/color];
    ....
}

Or is it better to keep them seperated, like this:

.class1 {
    color: [same color];
    ....
}
.class2 {
    color: [same color];
    .... 
}

Does this affect load time in any way? Is it just about personal preference?

Group them together: you write less (so file is lighter, better performance) and when you need to change some properties, you change them once. — Mattia Nocerino, Aug 08 '16 at 10:13
It does have some effect. The latter one adds up more characters and thus increases file size which would increase load time. — z0mBi3, Aug 08 '16 at 10:13
Your first example is to declare the same properties for multiple different classes, the second example is declaring properties separately for each class, which is repeating the same code (assuming you're talking about using the same properties inside each declaration). Essentially the understanding is the more lines there are, the larger the file size, so keep things clean and DRY :) — Andy Holmes, Aug 08 '16 at 10:13
@z0mBi3 So the only thing that affects load time is the file's size? — , Aug 08 '16 at 10:17
Merging or Combining Selector Rules will also speed up the css processing time. You can refer this article to know more on how to increase the load time by optimising css http://www.lostsaloon.com/technology/seo-8-tips-to-optimize-css-files-to-speed-up-page-loading/ Additional you could find more about how browsers render the html and apply the css rules in http://stackoverflow.com/questions/6951108/how-is-css-applied-by-the-browser-and-are-repaints-affected-by-it — z0mBi3, Aug 08 '16 at 10:30

0 Answers0