simplify modifier classes

[tlindig]

I do not know, if this is the right place for a discussion, but I found no better for now. So I start it here.

The bone of contention

Many controls and components have their own class modifier, but want say the same.

For instance

• class="text-danger" for paragraphs
• class="danger" in tables rows or cells
• class="btn btn-danger" for buttons
• class="alert alert-danger" for alerts
• class="progress-bar progress-bar-danger" for progress bars
• class="panel panel-danger" for panels
• class="label label-danger" for labels

All that want one result, a different look, a modification of the default look, but we need to use 7 different ways to say it.

The proposal

For me it would be looks easier to learn and to document, if we combine the base class with common modifier classes. So we would have some classes to specify the coloring:

• default
• primary or brand or highlight
• success
• info
• warning
• danger or error

we would have some classes to specify the state:

• active or pressed
• focus
• hover
• disabled

and some for size:

• size-xs
• size-sm
• size-md
• size-lg

To modify an item, you than could combine this modifiers:

• a big danger button would look like this:

class="btn danger size-lg"
instead of
class="btn btn-danger btn-lg"

• big danger progress bar would look like this:

class="progress-bar danger size-lg"
instead of
class="progress-bar progress-bar-success progress-bar-lg"

I know, this would be a big change and could only realized in the next major version, but I think this would improve Bootstrap and I like to know, how you think about this.

[cvrebert]

It's done the way it is deliberately; see http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/ for some explanation why.

[tlindig]

Prefixing names is great, it can prevent unwanted side effects. So what about the prefix bs-? To be consequent, it should be applied to all classes, that bootstrap use. And to be more flexible, it could be set via an variables in less or with templating in grunt.

What's that base class stand for?

I am talking from modifier classes. They stand for the meaning which the semantic name of the modifier suggests. You have to documented them in any case, also if you have prefixes.

What elements will be affected at the root level?

I am talking from modifier classes, by convention they should have only style definition in combination with a base class. So if they stand alone, they have to have no effect.

How many elements have .success chained onto them?

That could be shown in a matrix.
By the way, how you will answer this question with component specific prefixed modifier classes?

Can it be extended further to more components?

yes, absolutely easy.

What if one instance of .success uses green text on a white background while another uses white text on a green background?

Same problem you have with prefixed classes, isn't it?

[mdo]

We'll stick to the pattern we use today (although I know we deviate at times, and that'll change in v4).