3 ms·
Sass still has a lot of popularity in the BEM world where you can use nesting to generate flat classnames that would be tedious to write out by hand, e.g.: .
by ericwood 5y ago
Sass still has a lot of popularity in the BEM world where you can use nesting to generate flat classnames that would be tedious to write out by hand, e.g.:
.element {
&__title {
color: red;
}
&__subtitle {
color: blue;
}
}
which compiles down to:
.element__title {
color: red;
}
.element__subtitle {
color: blue;
}
There's a lot of (valid) criticism that this makes code harder to grep, although if you structure things well it's still easy to find via the base element class. BEM and approaches like this in general tend to require a lot of discipline and organization to pull off effectively.
- blacktriangle 5y agoThis is where I'd step in and argue BEM is a terrible idea. Any time you're encoding hierarchy like this into strings you have failed. BEM is the worst of both worlds since you have higherarchical class names and you have still created CSS that's heavily dependent on the hierarchy. CSS wants you to write: .element.title { color: red; } .element.subtitle { color: blue; } Any technique that depends on discipline and organization has already failed.
- ericwood 5y agoI don't think CSS has any particular preference, which is why there's so many different ways to approach these problems. But I do agree, I don't think I've ever worked on a BEM codebase that didn't end up messy, and the disciplined approach almost always means making tons of small naming/organization decisions as you code, which is tiring and difficult to maintain. People scoff at CSS-in-JS and atomic approaches like Tailwind (although Tailwind seems to get a lot of support around these parts now!), but I've really come to see the value in side-stepping these issues entirely.
- blacktriangle 5y agoCSS does have a preference. CSS has absolutely 0 knowledge of your BEM hierarchy, they're just different names as far as its concerned. The developer has just chosen to pretend that a hierarchy exists where there is none. CSS cannot do trees, but it can do logical AND and OR, so you can somewhat express a hierarchy as a union of the different levels of your tree, so .button.login.green has a logical meaning in CSS where .button__login--green is no different than using .pinapple as a class name.
- ericwood 5y agoFair enough, I think it's safe to say that CSS has a skew towards the cascade and I guess I misunderstood your original meaning there.