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.

  • I think each could be used very effectively, but I personally prefer the Foundation example. The “info” class could have styles that could commonly be applied to various types of other elements that share the class. With the Bootstrap example’s method, both classes would only make sense to style button elements, possibly for more limited use.