[Kequc]

It feels to me that this conversation is quite old I'm finding myself not convinced by the examples put forward in the article. It looks like a lot of unnecessary complexity. You can have a lot of success by simply picking a common css convention.

  .mybutton
    /* all styles for Normal */
  .mybutton.disabled
    /* overrides for Disabled */
  .mybutton.error
    /* overrides for Error */
  .mybutton.in-progress
    /* overrides for In Progress */

This is simpler and works incredibly well with javascript because I don't have to find replace remove a subset. I just addClass('disabled') removeClass('disabled').

[prezjordan]

Now what if you wanted to bring in another button - a very similar one - with slightly different styles?

[Kequc]

You extend the styles now you perhaps have:

  .mybutton
    /* all styles for Normal */
  .mybutton.skewed
    /* overrides for Skewed */
  .mybutton.disabled
    /* overrides for Disabled */

  class="mybutton skewed disabled"

The suggestion in the OP would be that each one of those classes contain all of the styles for the button. That isn't necessary. Plus it requires, what I count, a minimum of two additional language abstractions in order to do it.

[talmand]

Excellent answer. I love these "gotcha" examples when taking something that should be relatively simple and trying to make it more complicated to prove, um, something.

I wish people would realize that making their CSS more complicated and bloated is not necessarily the answer.

[NathanCH]

I agree, a lot of these solutions come from bad CSS. Not because CSS is bad.

[namuol]

That so much CSS is "bad CSS" indicates that the problem isn't the craftsman so much as the tool...

[talmand]

Ah, I see, so when I attempt to use a hammer as a wrench I can claim the hammer is a horrible tool.

CSS does exactly what it was designed to do and does it quite well. It only goes "bad" when people attempt to make it do things it wasn't designed to do. Blaming the tool for that is the sign of a bad craftsman.

[christophilus]

I agree. I tend to prefix my modifiers with "is-", though so that you know it is a modifier. e.g. ".mybutton.is-skewed" and then never have a standalone ".is-" rule. They are always modifiers only.

[Kequc]

The modifier I use is longer, but I might switch to is-, that seems like a nice convention.