
Unleashing the Power of CSS
Stephanie Eckles
- Editorial
- Sitepoint
- Año
- 2023
- Páginas
- ~92
- Nivel
- Intermedio
De qué trata
Libro breve de la serie Hybrid de SitePoint, publicado en mayo de 2023, en el que Stephanie Eckles (creadora de ModernCSS.dev, SmolCSS.dev y StyleStage.dev) repasa las funciones de CSS moderno que ya tienen buen soporte en los navegadores. Su subtítulo, «Advanced Techniques for Responsive User Interfaces», resume el objetivo: crear interfaces adaptables con menos código y sin trucos heredados. Está dirigido a desarrolladores front-end de nivel intermedio que ya dominan los fundamentos de CSS (cascada, especificidad, Flexbox y Grid básicos) y quieren ponerse al día con lo que ha cambiado en los últimos años.
Se organiza en cuatro capítulos. El primero, «What You've Missed in CSS Land», hace un recorrido por las mejoras recientes en layout, diseño responsivo, estilado de elementos, propiedades y selectores, y adelanta funciones que estaban por llegar. El segundo se centra en el selector relacional :has() y en cómo aprovecharlo para que los componentes reutilizables se adapten según su contenido. El tercero muestra usos prácticos de las container queries, que permiten que un componente responda al tamaño de su contenedor y no al de la ventana. El cuarto enseña a construir layouts responsivos sin media queries, con técnicas intrínsecas basadas en Grid, Flexbox y funciones como clamp(), min() y max().
No hay un proyecto único, sino ejemplos de componentes y patrones de layout que se pueden trasladar directamente a un sistema de diseño. Su valor está en lo actualizado y concreto: en menos de cien páginas reúne las técnicas que más cambian la forma de escribir CSS responsivo hoy. Al ser tan corto, no es una referencia exhaustiva ni sirve para aprender CSS desde cero, y algunos temas (como las cascade layers o el anidamiento nativo) apenas se mencionan, si es que aparecen. Conviene complementarlo con los artículos de la propia autora y con la documentación de MDN.
- CSS moderno
- Selector :has()
- Container queries
- Diseño responsivo
- Layout intrínseco
- CSS Grid
- Flexbox
- clamp()/min()/max()
- Componentes reutilizables
¿Cómo enseña?
Teoría + práctica
- ✗ Sin ejercicios
- ✗ Sin proyectos

