Un reset que vale la pena en CSS

No el de 400 líneas: la docena de reglas cuya ausencia sí notarías.

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: 4rem;
}

body { min-block-size: 100svh; line-height: 1.5; }

img, picture, video, canvas, svg {
  display: block;
  max-inline-size: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

Cómo funciona

1. Border-box en todo, heredado, para que un componente pueda salirse.
2. Los elementos de medios son de bloque y nunca más anchos que su caja.
3. text-size-adjust evita que iOS infle el texto en horizontal.

Palabras clave y builtins usados aquí

• color
• display
• font
• margin
• rem

El intento, en números

Líneas

18

Caracteres a escribir

411

Tokens

106

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

Paso 1 de 3 en Fundamentos; paso 1 de 9 en Organizar el CSS.

Siguiente →