Naming a component in CSS

Block, element, modifier: a convention that makes a class say where it belongs.

.media-card { display: grid; gap: 0.75rem; }

.media-card__figure { margin: 0; }
.media-card__title { font-size: 1.125rem; margin: 0; }
.media-card__meta { color: #64748b; font-size: 0.875rem; }

.media-card--horizontal {
  grid-template-columns: 10rem 1fr;
  align-items: start;
}

.media-card--muted .media-card__title { color: #64748b; }

/* state lives on a data attribute, not in the name */
.media-card[data-state="loading"] { opacity: 0.6; }

How it works

1. The block is the component; the element is a part of it.
2. A modifier changes a variant and never stands on its own.
3. Flat names mean flat specificity, so nothing has to be overridden twice.

Keywords and builtins used here

• color
• display
• gap
• grid
• margin
• opacity
• rem

The run, in numbers

Lines

15

Characters to type

444

Tokens

86

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 61 seconds.

Type this snippet

Step 1 of 3 in Naming things, step 4 of 9 in Organizing CSS.

← Previous Next →