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.