Is it better/faster to (1) stack selectors in style declarations, (2) stack classes in HTML tags, or (3) stack duplicate declarations in unique selectors?
To clarify my question, I will show you examples of each. Each piece of code should accomplish the same end goal, but I'm not sure if one will ultimately be faster to load or whether it is just a matter of preference.
<style>
.one, .two, .three {color:white}
.one, .two {background:blue;height:30px}
.one, .three {width:800px}
.two, .three {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<style>
.white {color:white}
.bluebg {background:blue}
.heightThirty {height:30px}
.widthEight {width:800px}
.sizeSixteen {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one white bluebg heightThirty widthEight"></div>
<div class="two white bluebg heightThirty sizeSixteen"></div>
<div class="three white widthEight sizeSixteen"></div>
<style>
.one {color:white; background:blue; height:30px; width:800px; font-size:10pt}
.two {color:white; background:blue; height:30px; font-size:16pt; width:650px}
.three {color:white; width:800px; font-size:16pt; background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
I used to create sites using the third method, but I found it difficult to change values, if I decided to change the colour scheme of a site, for example. I would have to do a find/replace for background:blue and change it to something else (but find/replace can prove ineffective if I'm being less than consistent). Now I use a combination of the first and second method, with a preference for the first. I decide which elements should share style declarations, and group them together in the stylesheet.
The first method uses less characters (at least in this example), so I know it would make for a smaller filesized HTML file, but I'm not sure about loadtime; and there could be other things I'm unaware of.
Is there a method which ought to be used? I've pointed out the problem that can come with the third method, but are there other problems (with any three) that I don't know about?
I like the 3rd method and 1st method.
When working on most sites, I try to use the 1st service, without duplicating selectors in so many places (just a few) so that they remain in control.
When using 3rd method, it can be a nightmare to refactor, here comes the role of other languages that translate to CSS, namely SASS and LESS. Those languages allow you to store repeated parts in variables and functions (called "mixins" usually).
I think you'll love LESS http://lesscss.org/ a lot. I jumped to an existing project using it to create some special reusable UI widgets and all CSS was using LESS, and without prior knowledge it was easy enough to understand existing code, and write new parts. Recommended for new websites, while it or 1st method are fine for existing sites.