Epílogo y claves

La postura del libro

CSS: The Definitive Guide no es un libro de “cómo usar CSS”. Es un libro de qué hace CSS y por qué. Cubre cada propiedad con detalle, discute los casos edge y señala las interacciones con otras propiedades.

El tono del libro

Meyer y Weyl escriben con:

• Precisión técnica: cada propiedad explicada con su sintaxis, valores y comportamiento.
• Casos prácticos: ejemplos claros y razonados.
• Historia: cómo evolucionó cada propiedad.
• Honestidad: cuando algo es controvertido, el libro lo dice.

Las ideas recurrentes

A lo largo de las notas, hay ideas que se repiten con insistencia. Las recopilo aquí.

1. CSS es declarativo, no imperativo

El CSS describe el aspecto, no el comportamiento. No dices “calcular el ancho”, dices “el ancho es 50%”. El navegador hace el resto.

2. El box model es el marco central

Margin, border, padding, content. Todo opera sobre esta caja. Entender el box model es entender CSS.

3. box-sizing: border-box es el default práctico

Con border-box, el width es lo que tú especificas. Con content-box, hay que sumar padding y border. El libro recomienda border-box.

4. Specificity es la fuente de muchos problemas

Tres dígitos (a, b, c, d): ID > class > element. Los IDs son problemáticos. Mejor diseñar especificities planas.

5. La cascada es predecible

Si dos reglas tienen la misma specificity, gana la última. Si tienen different specificity, gana la más alta. !important rompe el orden.

6. Herencia es automática para algunas propiedades

Color, font, line-height se heredan. width, height, padding, margin no. Aprende cuáles se heredan para no escribir de más.

7. Flexbox es para 1D, Grid es para 2D

Cada herramienta tiene su caso. Usa flexbox para componentes, Grid para layouts complejos.

8. Container queries complementan media queries

Media queries responden al viewport. Container queries responden al contenedor. Juntas, son la base del responsive moderno.

9. Specificity > el orden de aparición

El orden solo importa cuando las specificities son iguales. Escribir mejor el orden de las reglas no resuelve problemas de specificity.

10. gap es mejor que margin en flexbox y grid

Margin en items de flex/grid no colapsa y crea espacios no deseados. gap es la forma moderna.

11. Variables CSS son el sistema de tokens

Custom properties permiten tematización, consistencia y variables en tiempo real. Son la base de cualquier sistema de diseño.

12. font-display: swap o optional

No hagas FOIT (invisible). Usa swap (con fallback) u optional (caché).

13. Mobile-first es el estándar

Empieza por el caso más pequeño. min-width para los siguientes breakpoints.

14. prefers-reduced-motion es accesibilidad

Respeta la preferencia del usuario. Para algunos, el movimiento es molesto.

15. will-change con moderación

Cada will-change es memoria. Úsalo solo en animaciones pesadas.

Marcos de decisión

El libro no da reglas absolutas, pero ofrece marcos para decidir. Aquí los más útiles.

¿Flexbox o Grid?

Flexbox cuando:

  - Una dimensión (fila o columna).
  - Los items deben fluir.
  - No necesitas alineación en ambas dimensiones.

Grid cuando:

  - Dos dimensiones (filas y columnas).
  - Necesitas grid complejo.
  - Quieres alinear en ambas dimensiones.

Regla práctica:

  - Intenta flexbox primero.
  - Si necesitas dos dimensiones, usa grid.

¿Cuándo usar máscaras vs clip-path?

Máscaras:

  - Imágenes como máscara.
  - Gradients complejos.
  - Efectos artísticos.

Clip-path:

  - Formas geométricas.
  - Animaciones simples.
  - Mejor performance.

¿Container queries o media queries?

Media queries cuando:

  - Layout de página completo.
  - El cambio es global.

Container queries cuando:

  - Componentes que cambian según el espacio.
  - Componentes reutilizables.
  - Diseño fluid.

¿Variables CSS o var() con fallback?

Siempre:

  - Define variables en :root.
  - Usa var(--name, fallback) para tolerancia.
  - Documenta los valores esperados.

¿Animación con transition o animation?

Transition:

  - Cambio de estado (hover, focus, class change).
  - Simple y declarativo.
  - Un evento, una propiedad.

Animation:

  - Ciclos infinitos.
  - Multi-step (keyframes).
  - Independiente del estado.

¿Float, position, flexbox, grid?

Float: Texto alrededor de imágenes.

Position: Modales, tooltips, dropdowns.

Flexbox: Navbars, cards, listas, formularios.

Grid: Layouts de página, grids complejos.

display: table: Solo para casos legacy.

Patrones a evitar

El libro señala patrones problemáticos:

/* Mal: IDs para estilo */
#header { color: navy; }

/* Mal: !important para tapar specificity */
.text { color: red !important; }

/* Mal: selector muy específico */
body.home .container > .row > .col .button { }

/* Mal: floats para layout */
.sidebar { float: left; }

/* Mal: margin en flex items */
.flex-item { margin: 1em; }

/* Mal: absolute positioning para layout */
.content { position: absolute; top: 0; }

/* Mal: @import en producción */
@import url("base.css"); /* bloquea el render */

Patrones a seguir

/* Bien: clases semánticas */
.button { color: navy; }

/* Bien: specificity plana */
.button { }
.button.primary { }

/* Bien: flexbox para componentes */
.navbar { display: flex; }

/* Bien: grid para layouts */
.page { display: grid; }

/* Bien: gap en flex/grid */
.container { gap: 1em; }

/* Bien: link en HTML para CSS */
<link rel="stylesheet" href="styles.css">

/* Bien: variables CSS */
:root { --color-primary: navy; }

Buenas prácticas que el libro subraya

1. Mobile-first

/* Base: mobile */
.button { padding: 0.5em; }

/* Queries para siguientes */
@media (min-width: 768px) {
    .button { padding: 1em; }
}

2. Reset y normalización

/* Reset moderno */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

3. Variables para tokens

:root {
    --color-primary: navy;
    --color-text: #333;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --radius: 4px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

4. Respetar la accesibilidad

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a1a;
        --color-text: white;
    }
}

5. Performance

/* Solo propiedades animables */
.element {
    transition: transform 0.3s, opacity 0.3s;
}

.element {
    will-change: transform;
}

/* Evitar reflows */
.element {
    position: absolute;
    transform: translateX(100px);
}

El cache de CSS

El libro recoge un punto importante:

CSS es cacheable:

  - El navegador cachea las hojas de estilo.
  - Las clases CSS tienen scope global.
  - Una hoja externa se carga una vez y se cachea.
  - Inline styles no se cachean.
  - !important no se cachea (aplica más cambios).

CSS Houdini

El libro menciona el futuro de CSS:

CSS Houdini:

  - API de extensibilidad de CSS.
  - Permite definir custom properties con tipos.
  - Permite definir custom layouts.
  - Permite definir custom paint.
  - Más allá de la cascade estándar.

@property --color {
    syntax: "<color>";
    initial-value: navy;
    inherits: false;
}

Reflexión final

CSS es un lenguaje engañosamente simple. La sintaxis es trivial; las propiedades parecen legibles. Pero el modelo de caja, la specificity, la cascade, la herencia, el layout unidimensional y bidimensional, los contextos de formato, los efectos visuales… cada nivel de profundidad revela más complejidad.

El libro recoge la observación de manera clara:

Cómo acercarse a CSS

Recomiendo:

  1. Empieza con flexbox.
     Es el primer modelo de layout moderno.
     Para el 80% de los componentes.

  2. Aprende grid después.
     Para layouts complejos.
     Para "2D".

  3. Usa container queries.
     Para componentes reutilizables.
     Para diseño moderno.

  4. Variables CSS para tokens.
     Para tematización.
     Para consistencia.

  5. Mobile-first siempre.
     Empieza por el caso difícil.
     Añade complejidad.

  6. Respeta la accesibilidad.
     prefers-reduced-motion.
     prefers-color-scheme.
     prefers-contrast.

Lo que NO hacer

Anti-patrones:

  - IDs para estilo.
  - !important para tapar problemas.
  - Selectors muy específicos.
  - Floats para layout.
  - Inline styles en producción.
  - @import en producción.
  - Olvidar la cascada.
  - Ignorar la accesibilidad.
  - Ignorar el rendimiento.

Una observación final

CSS es el lenguaje más importante de la web. HTML es la estructura, JavaScript es el comportamiento, pero CSS es la primera impresión. La página se ve antes de leerse.

Próximos pasos con esta wiki

Con esta wiki completa, las direcciones naturales desde aquí son:

• Usarla como referencia: cuando un problema aparezca, vuelve a las notas pertinentes.
• Experimentar: la mejor forma de aprender CSS es practicando. Crea un proyecto pequeño y aplica las notas.
• Enseñar: comparte lo aprendido, escribe tu propio blog, enseña a otros.
• Criticar: la wiki es parcial. Tu lectura debe serlo también.

Y, sobre todo: CSS es un lenguaje vivo. Cada año se añaden features (container queries, @property, color-mix, etc.). Mantente al día con can-i-use y MDN.