BEM
Acronymblock element modifier, block__element--modifier, bem namingDefinition
Block, Element, Modifier — a CSS class-naming convention from Yandex in which a standalone component is a block (.card), a part of it is an element (.card__title), and a variation of either is a modifier (.card--featured, .card__title--large); flat specificity, no nesting, and the markup says what the CSS is for
The naming most of the estate’s IVY components use (.abbv-button-primary is a block with a modifier folded in), and the convention a component contract’s anatomy maps onto almost one-to-one: the block is the component, the elements are its parts, the modifiers are its treatments. Its virtue is that a class name is a sentence — anyone can read .hero__cta--secondary — and its cost is length and the temptation to encode layout in modifiers. Utility CSS (Tailwind) and scoped styles (Vue’s <style scoped>) solved the same collision problem a different way, which is why BEM is rarer in new code and everywhere in inherited code.
Name the block, name its parts, name the ways they vary. Three underscores and dashes, and a stylesheet a stranger can navigate. The convention outlived the era that needed it because the sentence was always the good part.