CSS - Which method is better?

Question

Which is better in regards to processing time but also taking into account ease of use for a developer?

.font_small{ font-size:10px; }
.font_blue{ color:blue; }
.font_red{ color:red; }

<span class="font_small font_blue">Hello World!</span><br />
<span class="font_small font_red">Today's the day!</span>

OR

.font_blue_small{ color:blue; }
.font_red_small{ color:red; }

.font_blue_small .font_red_small { font-size:10px; }

<span class="font_blue_small">Hello World!</span><br />
<span class="font_red_small">Today's the day!</span>

OR

.font_blue_small{ color:blue; font-size:10px; }
.font_red_small{ color:red; font-size:10px; }

<span class="font_blue_small">Hello World!</span><br />
<span class="font_red_small">Today's the day!</span>

OR

Another option I haven't though of yet...?

Answer 1

The first allows more flexibility and code reusability.

Answer 2

For your example, I'd go with the first one.

I'll assume that this is just an example - in real usage, you should actually use descriptive class names:

<span class="greeting">Hello world!</span>
<span class="motd">Today's the day!</span>

Using classes like this, it's less likely that you'll need to combine the class names and hence, this problem rarely surfaces. Now, given that HTML, I would either the second or third options, depending on how many rules the two classes share.

Answer 3

Unless your page has tens of thousands of DOM nodes nested hundreds of levels deep, the differences in the CSS rules above are unlikely to make a difference in rendering time. If you're worried about byte size for download time, it's probably better to use a compressor like CSSMin than to try and combine classes together like in the second and third examples.

In short, go with the first one because it's cleaner for implementation, and there are unlikely to be performance differences. But use descriptive class names like Rimian and nickf said.

Answer 4

None of them :)

Take the implementation out of your css class name. What if you change blue to green? What if you want to change the colour of something that is not a font?

Answer 5

.small { font-size:10px; }
.blue  { color:blue; }
.red   { color:red; }

<span class="small blue">Hello World!</span><br />
<span class="small red">Today's the day!</span>

But try to use better names for your classes, such as "maintitle", "teaser", "info", "header" etc. blue is not good. What if the customer wants green or red next week?

Better to use "meta naming", so name stuff after whats its supposed to be showing.