"Rigid class name conventions, such as BEM, are one theoretical solution to this issue. The BEM (Block, Element, Modifier) methodology is a systematic way of naming CSS classes to ensure reusability and structure within CSS files. Naming conventions like this can reduce cognitive load by leveraging domain language to describe elements and their state, and if implemented correctly, can make styles for large applications easier to maintain."
"In the real world, however, it doesn't always work out like that. Priorities can change, and with change, implementation becomes inconsistent. Small changes to the HTML structure can require many CSS class name revisions. With highly interactive front-end applications, class names following the BEM pattern can become long and unwieldy (e.g., app-user-overview__status--is-authenticating), and not fully adhering to the naming rules breaks the system's structure, thereby negating its benefits."
Prescriptive class name conventions are no longer enough to keep CSS maintainable amid increasingly complex interfaces. Developers learn to write modular, reusable, and descriptive styles, but real-world applications often experience style leakage into unintended areas. Scoped styles that leak force developers to create ever-more specific selectors, producing cascading specificity conflicts that override global styles. BEM naming conventions can reduce cognitive load and support reusability, but changing priorities, inconsistent implementation, small HTML changes, and unwieldy long class names undermine the approach. Many developers adopt utility frameworks to avoid specificity wars, while scoped CSS mechanisms promise a more reliable solution.
Read at Smashing Magazine
Unable to calculate read time
Collection
[
|
...
]