Last Updated: September 09, 2019
·
654
· peiche

CSS best practices for modular classes?

I've been comparing front-end frameworks, and I've come across something interesting. I wonder if there's an advantage to defining modular classes (that is, defining a base class and adding modifiers to it) a specific way.

Bootstrap isn't the only place I've seen this type of class structure, but it's one of the most commonly used and widespread.

By way of example, the CSS defining buttons is structured as follows:

.btn {
  /* base definition */
}
.btn-info {
  /* further styling */
}

You get the idea. In order to utilize this style of class definition, your button element markup is going to look like this:

<span class="btn btn-primary">I am a button</span>

By contrast, Foundation does it this way:

.button {
  /* base definition */
}
.button.info {
  /* further styling */
}

So your markup would then look like this:

<span class="button info">I am a button</span>

So my question is, is there any advantage with the way Bootstrap does it? If anything, it seems to me that doing it Foundation’s way is going to result in a slightly smaller stylesheet.


This was originally posted on my blog at eichefam.net.

1 Response
Add your response

The answer is Yes. Bootstrap uses a lot of CSS3 selectors, and there's a good reason by using each class separated by "-" as you mentioned.

[class*="btn-"] takes the same attributes for all kinds of btn (btn-info, btn-danger, btn-success) and you don't need to call 2 classes like foundation did.

And speaking about perfomance, the less you call, the more you get.

over 1 year ago ·