[u124556]

What's the problem with `class="btn large rounded"` and then in css:

    .btn {}
    .btn.large {}
    .btn.rounded {}
    .btn.large.rounded {}

[pault]

There's nothing technically wrong with this, but one could make the argument that once a project expands beyond a single developer, you have a greater chance of namespace collisions with vague class names like `.large`. Eventually someone will come along and make a `.large` class for headlines that will make your buttons have 36pt labels.

Edit: I have a suspicion that most attempts at "semantic" CSS are a symptom of a slightly OCD designer wanting to write pretty markup, which is, in my opinion, probably the last thing you should be optimizing for productivity.

[platz]

Except here .large doesn't exist on it's own, it's only used inside the .btn selector.

the .large class for headlines would similarly only be used inside the .h1 selector.

So there would be no collision in this case.

[ryanbrunner]

You can't guarantee that someone won't add a 'top-level' class name in the future that matches one of your 'modifier' class names. It's essentially the same argument as saying that global variables are OK because no one will ever have a global variable with the same name as yours.

[bsimpson]

I've heard people complain about this approach because if you tried to refactor, someone could have written class = "large rounded btn" in one place and "btn rounded large" in another, making finding all the variations more cumbersome.

That doesn't mean it's a bad approach, but that is one concern I've heard about it.

[tobr]

Not sure what you mean - order of classes don't have any effect with regular css .class selectors.

http://jsfiddle.net/n1a9Lew5/

Edit: Oh never mind, I now realize that you're saying it's harder to find markup that uses a specific combination of classes. That's probably true, sorry.

[morley]

I think they're trying to telegraph that "large" is describing a state specific to buttons.

[hliyan]

Or rely on semantic classes?

[u124556]

Yes, I was just following the example on the site but something like .btn.important would be even better.