Utilidades en CSS

Un solo trabajo cada una, sin contexto, y siempre la última palabra de la cascada.

@layer components, utilities;

@layer utilities {
  .flow > * + * { margin-block-start: var(--flow-gap, 1rem); }

  .stack { display: grid; gap: var(--gap, 1rem); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.5rem); }
  .center { margin-inline: auto; max-inline-size: 68ch; }

  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}

Cómo funciona

Una utilidad hace una sola cosa, así su nombre puede decir exactamente cuál.
Ponerlas en la última capa es lo que las hace ganar sin !important.
Genera las de espaciado desde la misma escala que usan los componentes.

Palabras clave y builtins usados aquí

ch
display
gap
grid
inset
layer
overflow
position
px
rem

El intento, en números

Líneas: 18
Caracteres a escribir: 452
Tokens: 128
Ritmo de tres estrellas: 85 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →