CSS Naming Convention

Most widely adopted. Separates Block, Element (__), and Modifier (--)

/* Block */
.card { }

/* Element (belongs to block) */
.card__title { }
.card__image { }
.card__body { }

/* Modifier (variation) */
.card--featured { }
.card--dark { }
.card__title--large { }

Categorizes CSS into: Base, Layout, Module, State, Theme

/* Base — element defaults */
body { margin: 0; }
a { color: inherit; }

/* Layout — prefix l- */
.l-grid { display: grid; }
.l-sidebar { width: 280px; }

/* Module — reusable components */
.nav { }
.btn { }

/* State — prefix is- */
.is-active { }
.is-hidden { }

/* Theme — prefix theme- */
.theme-dark { }

Two principles: separate structure from skin, separate container from content

/* Structure (reusable) */
.media { display: flex; gap: 16px; }
.media__body { flex: 1; }

/* Skin (visual, separable) */
.media--rounded img { border-radius: 50%; }

/* Don't couple container to content */
/* Bad: */ .sidebar h2 { color: blue; }
/* Good: */ .section-title { color: blue; }