Why use .btn and .btn-primary rather than button and button.primary?

[nategreen]

So, I’ve read a lot about architecting CSS that’ll scale, and it seems like everyone recommends using class selectors for just about everything instead of qualifying them with element selectors.

My question is: is it really better to build CSS and HTML this way, and if so, for what reasons? The only reasons I can come up with are, for instance, to allow developers to use .btn classes on links and divs and such (which I would want to avoid if I was designing a UI toolkit).

[Senff]

The only reasons I can come up with are, for instance, to allow developers to use .btn classes on links

That’s pretty much the main reason; in some cases, other tags are supposed to look like buttons and then you can easily style them by applying the class “btn”. Not just for A HREF links, but definitely also for INPUTs of type “button”.

By having a generic class “btn” (instead of just having them on BUTTONS) keeps your options open.

[nategreen]

So, if we opted to target button, input[type="button"], input[type="submit"], a[role="button"] instead of requiring a .btn class on everything, it’s more of a preference thing rather than a scalability or performance thing?

[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.

[Author]

Posts