4 ms·

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

by u124556 12y ago

hliyan 12y ago
Or rely on semantic classes?
- u124556 12y ago
  Yes, I was just following the example on the site but something like .btn.important would be even better.
morley 12y ago
I think they're trying to telegraph that "large" is describing a state specific to buttons.
bsimpson 12y ago
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 12y ago
  Not sure what you mean - order of classes don't have any effect with regular css .class selectors. http://jsfiddle.net/n1a9Lew5/ 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.
pault 12y ago
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 12y ago
  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 12y ago
    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.

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

by u124556 12y ago

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

hliyan 12y ago

Or rely on semantic classes?

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

morley 12y ago

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

bsimpson 12y ago

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 12y ago
Not sure what you mean - order of classes don't have any effect with regular css .class selectors. http://jsfiddle.net/n1a9Lew5/ 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.

pault 12y ago

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 12y ago
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 12y ago
  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.