Nombrar un componente en CSS

Bloque, elemento, modificador: una convención que hace que una clase diga a dónde pertenece.

.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; }

/* el estado vive en un atributo data, no en el nombre */
.media-card[data-state="loading"] { opacity: 0.6; }

Cómo funciona

1. El bloque es el componente; el elemento es una parte de él.
2. Un modificador cambia una variante y nunca se sostiene solo.
3. Nombres planos significan especificidad plana: nada se sobrescribe dos veces.

Palabras clave y builtins usados aquí

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

El intento, en números

Líneas

15

Caracteres a escribir

447

Tokens

86

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 61 segundos.

Escribe este fragmento

Paso 1 de 3 en Ponerle nombre a las cosas; paso 4 de 9 en Organizar el CSS.

← Anterior Siguiente →