Block, Element, Modifier
BEM is the most popular class naming methodology, invented at Yandex. It helps make components independent.
Three Pillars:
- Block: Independent component (e.g.,
header,button,card). - Element: Component part (
card__title,card__image). Written with two underscores. - Modifier: Property or state (
button--large,button--disabled). Written with two hyphens.
/* Example in HTML: <button class="btn btn--blue"> */
.btn { ... }
.btn--blue { background: blue; }
Important: Element cannot exist separately from block. You can't write just __title, only card__title.