BEM for Low Specificity
BEM (Block__Element--Modifier) keeps all selectors at a single class level (0,1,0), preventing specificity conflicts in large codebases.
CSS
Intermediate
4 min read
BEM and Flat Specificity
Example
/* BEM — all selectors: specificity 0-1-0 */
.card { border: 1px solid #dee2e6; border-radius: 8px; }
.card__title { font-size: 1.25rem; font-weight: 700; }
.card__body { padding: 1.25rem; }
.card--featured { border-color: #0d6efd; }
/* No nesting needed — no specificity escalation */ Pro Tip
BEM works best in plain CSS. Nesting syntaxes (SCSS, CSS nesting) make it even cleaner.