
The Advanced CSS Collection
Craig Buckler
- Editorial
- Sitepoint
- Año
- 2018
- Páginas
- ~350
- Nivel
- Avanzado
De qué trata
Antología publicada por SitePoint en octubre de 2018 que reúne en un solo volumen tres de sus libros cortos sobre CSS avanzado. Los capítulos están escritos por varios autores, entre ellos Craig Buckler, Ilya Bodrov-Krukowski, Claudio Ribeiro, Ahmed Bouchefra y Tiffany B. Brown. La idea central es mostrar todo lo que CSS ya puede hacer por sí solo, cuando antes hacía falta JavaScript complejo o directamente no era posible. Está pensada para desarrolladores front-end con experiencia previa en CSS que quieren ponerse al día con el CSS de 2018.
El primer libro, Modern CSS, trata transformaciones CSS, fuentes variables, Scroll Snap, SVG, temas con propiedades personalizadas controladas desde JavaScript, CSS en aplicaciones web progresivas (PWA) y rendimiento de CSS. El segundo, CSS Grid Layout: 5 Practical Projects, se dedica por completo a Grid Layout y lo combina con Flexbox, floats y mejora progresiva. El tercero, CSS Tools & Skills, se centra en el flujo de trabajo: automatización de tareas con Gulp.js, herramientas de optimización de CSS para PWA, linters y herramientas de calidad de código, depuración con las DevTools del navegador, minificación con CSSO y hojas de estilo para imprimir.
La parte más práctica es la de Grid, con cinco proyectos guiados. El resto combina explicación con ejemplos de código. Al ser una recopilación de artículos, el nivel y el estilo varían entre capítulos y no hay un hilo conductor único, aunque la variedad de temas es una ventaja. Algunas herramientas, como Gulp, han perdido protagonismo frente a Vite o PostCSS, y no trata Sass ni container queries. Conviene leerlo sabiendo ya las bases de selectores, cascada y Flexbox.
- CSS Grid
- Flexbox
- Mejora progresiva
- Transformaciones
- Fuentes variables
- Custom properties
- Scroll Snap
- SVG
- Rendimiento CSS
- Gulp.js
- Depuración con DevTools
- Minificación con CSSO
¿Cómo enseña?
Teoría + práctica
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Rediseño de un sitio con CSS Grid
Se toma un sitio existente y se rehace su maquetación con CSS Grid Layout en lugar de técnicas antiguas.
Layout de tarjetas al estilo Tumblr
Rediseño con CSS Grid de una página basada en tarjetas, al estilo de Tumblr, para colocar y redimensionar los bloques de contenido.
Layout responsive con Grid
Parte de una demo maquetada con floats y la migra a CSS Grid: centrado de elementos, elementos que ocupan varias celdas y cambio de diseño en pantallas pequeñas.
Layout con mejora progresiva
Construye un diseño que pasa de floats a Flexbox y de Flexbox a Grid según el soporte del navegador, aplicando mejora progresiva.
Formularios con CSS Grid
Usa CSS Grid para maquetar formularios limpios y adaptables, alineando etiquetas y campos sin marcado extra.

