BEM

Summary

Block-Element-Modifier — a naming convention (`.card__title--active`) that makes CSS class names self-documenting and reduces specificity conflicts in large projects. BEM creates a predictable naming vocabulary that makes component relationships explicit and reduces accidental coupling between unrelated parts of a stylesheet.

• 1Refactor one component's class names into BEM (`block__element--modifier`). Validate your understanding by applying it in a small practical example.
• 2Notice how BEM avoids nesting-based specificity wars. Validate your understanding by applying it in a small practical example.
• 3Compare BEM's verbosity against utility-class approaches like Tailwind.