Reply To: Why use .btn and .btn-primary rather than button and button.primary?

[nategreen]

Coincidentally, I just stumbled on Nicolas Gallagher’s post about semantics and front-end architecture. I see he advocates for the use of classes for scalability reasons:

A flexible and reusable component is one which neither relies on existing within a certain part of the DOM tree, nor requires the use of specific element types. It should be able to adapt to different containers and be easily themed. … Components that can be easily combined benefit from the avoidance of type selectors in favour of classes. … I’ve found [using multiple classes to style variants of a component] to be a more scalable pattern. For example, take the base btn component and add a further 5 types of button and 3 additional sizes. Using a “multi-class” pattern you end up with 9 classes that can be mixed-and-matched. Using a “single-class” pattern you end up with 24 classes.

So, I guess that explains why it’s like that in Bootstrap and the like, at least. Still seems very contrary to the way HTML and CSS are designed, but I guess part of learning more about front-end code is learning to accept dissonance.