When to add classes, when to add selectors?

Question

Given this:

<a class="details" href="#">more&hellip;</a>
...
<input type="submit" value="Gogogo">

Say that both should have very similar appearance, because that's what the designer wants. Do you do this:

<a class="fancybutton" ...
<input class="fancybutton" ...

.fancybutton { /* ... */ }

or this?

a.details, .someform input[type="submit"] { /* ... */ }

I'm struggling with this issue and I'm not sure where to go. It seems to be a choice between having a really clear stylesheet vs. nice markup that isn't littered with classes.

When do you choose one over the other?

Answer 1

The main reason to choose classes over more fancy CSS selectors is compatibility. Several versions of at least one major browser still in use don't support more advanced selectors properly and thus it's actually less painful to just use classes, since they "just work".

Answer 2

IE6 doesn't support input[type=submit], so if I'm developing for it, I'll definitely go for the class.

Answer 3

I'd generally use class because that has wider support than attribute selectors amoung browsers. Until the vast majority of the population have a browser that supports the CSS attribute selectors I would continue to uses classes in such a case.

Answer 4

I'd say, within complaint browsers, that the answer is specificity. Look to the breadth of the application of the style and define it with sufficient specificity to be unambiguous within the scope of your web-app.

Also, don't be afraid to use more than 1 style class on an element to develop a layered presentation approach, i.e. class="blackborder smalltext centred".

Answer 5

Like other users have said, using classes is good because it really simplifies the question of browser compatibility (problems arise when you try to use fancy CSS 2 selectors).

Another great reason to use simple class-based (or id-based, if possible) selectors over complex CSS 2 selectors is speed.

From google's "Optimize browser rendering", descriptions of why you should try to use simple selectors (class-only/id-only selectors are very simple):

Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. The less specific the key, the greater the number of nodes that need to be evaluated.

Child and adjacent selectors are inefficient because, for each matching element, the browser has to evaluate another node. It becomes doubly expensive for each child selector in the rule. Again, the less specific the key, the greater the number of nodes that need to be evaluated. However, while inefficient, they are still preferable to descendant selectors in terms of performance.

And a specific note about class-selectors over descendant selectors from the same article:

Use class selectors instead of descendant selectors.

For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:

ul li {color: blue;}
ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.