3 ms·
I never understood this with BEM: .nav { &__link { } } Why not this?: .nav { a { } }
by Eduard 4y ago
I never understood this with BEM:
.nav {
&__link {
}
}
Why not this?:
.nav {
a {
}
}
- achairapart 4y agoTo avoid CSS inheritance & specificity, the "Cascading" part of CSS is the actual root of all evil. If you think about it, all the modern approaches to CSS (BEM, Atomic CSS, OOCSS) try to avoid it all cost.
- alwillis 4y agoTo avoid CSS inheritance & specificity, the "Cascading" part of CSS is the actual root of all evil. The Cascade is CSS’a superpower. If only someone would come up with a way to write CSS to make the cascade work for you, not against you. Oh wait; that would be Inverted Triangle CSS. [1]: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ https://www.xfive.co/blog/itcss-scalable-maintainable-css-ar...
- Fire-Dragon-DoL 4y agoI'd like to believe that, but the industry has proven across the board that inheritance sucks. Cascading to me seems essentially inheritance, so I'm disillusioned, it's not a superpower, it's a liability
- jaredcwhite 4y agoExactly. I've never written strict BEM, mainly just take a few cues from it now and then. When writing components and especially now that we have awesome low-specificity selectors like :where or cascade layers (and soon :has !!), it's really better to just target the DOM structure with semantic/custom element names, parent-child relationships, states like aria, etc. and not saddle every single element with some kind of naming convention. (I honestly don't use `class` much at all anymore.)