PostCSS: automatiza y moderniza tu CSS

Configura PostCSS con plugins clave como Autoprefixer y postcss-preset-env para escribir CSS moderno con compatibilidad real.

PostCSS transforma tu CSS mediante plugins en fase de build.

Autoprefixer añade prefijos según tu browserslist y evita mantenimiento manual.

postcss-preset-env te permite usar sintaxis moderna con fallback compatible.

PostCSS se configura en JavaScript (no en HTML) para mantener el pipeline de estilos versionado y reproducible.

  • No es un framework, es un procesador configurable.
  • PostCSS lee tu CSS y lo transforma según plugins: compatibilidad, optimización, análisis o convenciones internas.
  • La ventaja es modularidad: activas solo lo que necesitas y mantienes el pipeline comprensible para el equipo.
  • Autoprefixer para compatibilidad.
  • preset-env para features modernas.

Qué hace PostCSS exactamente

No es un framework, es un procesador configurable.

PostCSS lee tu CSS y lo transforma según plugins: compatibilidad, optimización, análisis o convenciones internas.

La ventaja es modularidad: activas solo lo que necesitas y mantienes el pipeline comprensible para el equipo.

  • Autoprefixer para compatibilidad.
  • preset-env para features modernas.
  • Plugins de minificación y ordenado en producción.

Configuración base recomendada

Browserslist y resultados predecibles

Autoprefixer usa tu browserslist para decidir qué prefijos añadir. Sin esa referencia, la salida puede no coincidir con el soporte objetivo real del proyecto.

Define browserslist en package.json o en archivo dedicado para alinear decisiones de frontend y QA.

PostCSS se escribe en JavaScript, no en HTML

La configuración de PostCSS vive en archivos JavaScript como postcss.config.js porque forma parte del proceso de build, no del marcado HTML.

Esto permite compartir configuración en equipo, revisarla en pull requests y reproducir exactamente la misma compilación en local y CI.

CSS
65

PostCSS: automatiza y moderniza tu CSS

Configura PostCSS con plugins clave como Autoprefixer y postcss-preset-env para escribir CSS moderno con compatibilidad real.

Código del tema: display: grid; gap: 1rem;

📘 Teoría

Qué hace PostCSS exactamente

No es un framework, es un procesador configurable.

PostCSS lee tu CSS y lo transforma según plugins: compatibilidad, optimización, análisis o convenciones internas.

La ventaja es modularidad: activas solo lo que necesitas y mantienes el pipeline comprensible para el equipo.

  • Autoprefixer para compatibilidad.
  • preset-env para features modernas.
  • Plugins de minificación y ordenado en producción.

Configuración base recomendada

Browserslist y resultados predecibles

1

Autoprefixer usa tu browserslist para decidir qué prefijos añadir. Sin esa referencia, la salida puede no coincidir con el soporte objetivo real del proyecto.

2

Define browserslist en package.json o en archivo dedicado para alinear decisiones de frontend y QA.

PostCSS se escribe en JavaScript, no en HTML

1

La configuración de PostCSS vive en archivos JavaScript como postcss.config.js porque forma parte del proceso de build, no del marcado HTML.

2

Esto permite compartir configuración en equipo, revisarla en pull requests y reproducir exactamente la misma compilación en local y CI.

🧪 Aprende probando

Ejemplo Ejemplo: config mínima con plugins Escribe una configuración válida para PostCSS.

🏁 Retos

Reto Reto: completar plugin de compatibilidad Añade Autoprefixer en la configuración.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com