The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why use .btn and .btn-primary rather than button and button.primary?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #238797

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


    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.


    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?


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.