5 ms·
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 unnecessa
by Kequc 11y ago
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 11y agoNow what if you wanted to bring in another button - a very similar one - with slightly different styles?
- Kequc 11y agoYou 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 11y agoExcellent 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 11y agoI agree, a lot of these solutions come from bad CSS. Not because CSS is bad.
- namuol 11y agoThat so much CSS is "bad CSS" indicates that the problem isn't the craftsman so much as the tool...
- talmand 11y agoAh, 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 11y agoI 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 11y agoThe modifier I use is longer, but I might switch to is-, that seems like a nice convention.