CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine
June 27, 2025
CSS is wild, really wild. And tricky. But let’s talk specifically about specificity.When writing CSS, it’s close to impossible that you haven’t faced the frustration of styles not applying as expected — that’s specificity. You applied a style, it worked, and later, you try to override it with a different style and… nothing, it just ignores you. Again, specificity.
Sure, there’s the option of resorting to !important flags, but like all developers before us, it’s always risky and discouraged. It’s way better to fully understand specificity than go down that route because otherwise you wind up fighting your own important styles.
Source: CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine
There are three fundamentals of CSS that are subtle but powerful–a combination that should set out spider senses tingling. Inheritance (how style flows through document from ancestor to descendants), the Cascade (how style flows through our style sheets, from lower specificity to higher specificity) and specificity itself (the rules that decide when two CSS rules may apply to an element which takes effect).
For many years developers have wrangled with these. Sometimes via methodologies like BEM and OOCSS, and sometimes with more brute force, using utility classes or CSS in JS.
But understanding these aspects of CSS and their interplay, and how they enable web design is a key capability of front end engineering.
Here Victor Ayomipo looks at BEM, utility classes and the newer Cascade Layers and how they can help us better manage specificity and our CSS architecture.
