CODEWITHSUNDEEP
csstwitter-bootstrapless
tmimicus
tmimicus

Reputation: 184

Why does Twitter Bootstrap have repetitive class names for variations on a style?

Bootstrap classes are very repetitive: 

<a class="btn btn-large btn-block btn-primary">Simple button</a>

Couldn't the CSS be rewritten to: 

.btn { /* CSS for btn */ }

.primary.btn { /* primary btn css */ }


.block.btn { /* block btn css */ }

/* etc... */

Which then for the same button: 

<a class="large primary block btn">Simple button</a>

That reads a lot better to me, still obeys OOCSS [1], and is DRYer.

I'm sure there's a good reason BS uses this convention - can anyone enlighten me?

[1]Why does Twitter Bootstrap require multiple classes for buttons?

Upvotes: 2

Views: 354

Answers (3)

Bass Jobsen
Bass Jobsen

Reputation: 49044

More information can also be found at: https://github.com/twbs/bootstrap/issues/10332

When you take the button as an example. You can apply these classes on button and a tags, so it is not possible to use button.success to select all possible tags / elements which can be styled so that they look like a button. So .btn- means like a button.

As your own example shows is primary a button or a panel style?

Bootstrap uses base classes and other classes to describe the state. The base classes set the general properties whilst the states (or size, etc.) classes describe how the element should be styled and colored. Which seems to be based on OOCSS.

On the other hand base classes prevent that the list of selectors (more bytes) grows when many classes share the same properties. You can see that when using the Less extend. Some example; consider the following base class (in Less):

   .button-base-class {
    color:red;
      &:hover,
      &:active,
      &:focus { color:green;
      }
    }

Now extend the above base class multiple times:

button.type1 {type:1; &extend:(.button-base-class all); }
button.type2 {type:2; &extend:.button-base-class all); }
button.type3 {type:3; &extend:(.button-base-class all); }

Which outputs in CSS among other the following code:

.button-base-class:hover,
.button-base-class:active,
.button-base-class:focus,
button.type1:hover,
button.type1:active,
button.type1:focus,
button.type2:hover,
button.type2:active,
button.type2:focus,
button.type3:hover,
button.type3:active,
button.type3:focus {
  color: green;
}

Which will be a long list of selectors that grows every time that you extend the base class.

Lastly one could wonder why using not using attribute selectors instead of bases classes. Every btn btn- occurrence can also be selected with [class^="btn-"],[class*=" btn-"]. When using the latest you don't have to code the base class in your HTML. Bootstrap avoid (partial) attribute selectors for performance reasons (especially IE). These performance issues can be discussed when reading: http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Upvotes: 1

tmimicus
tmimicus

Reputation: 184

I think I read that Bootstrap is preventing itself from using generically named classes that might exist in an existing project.

For example, having a .success class is viewed as dangerous in a framework, because it is likely going to be used as a custom class. .btn-success is less likely to have conflicts.

However, Bootstrap also contradicts this: they have an .active class, which in my eyes is an extremely common class name to have.

I prefer to have more composable class names, and it hasn't really bitten me yet. But I'm not making a framework used by thousands, so what do I know!

Upvotes: 3

Mooseman
Mooseman

Reputation: 18891

Cleaner stylesheets for one thing. It also makes maintenance easier by keeping classes consistent. (btn- for buttons, dropdown- for dropdowns, label- for labels, etc.)

Upvotes: 0

Related Questions