Introducción a PostCSS

Descubra PostCSS, una gran herramienta que le ayudará a escribir CSS moderno. PostCSS es una herramienta muy popular que permite a los desarrolladores escribir preprocesadores o posprocesadores CSS

Introducción

PostCSS es una herramienta que permite a los desarrolladores escribir preprocesadores o posprocesadores CSS, llamadoscomplementos. Existe una gran cantidad de complementos que proporcionan muchas funcionalidades y, a veces, el término "PostCSS" significa la herramienta en sí, más el ecosistema de complementos.

Los complementos de PostCSS se pueden ejecutar a través de la línea de comandos, pero generalmente los ejecutores de tareas los invocan en el momento de la compilación.

La arquitectura basada en complementos proporciona un terreno común para todas las operaciones relacionadas con CSS que necesita.

Nota: PostCSS a pesar del nombre no es un postprocesador CSS, pero se puede usar para construirlos, así como otras cosas.

PostCSS proporciona varias funciones quemejora profundamente tu CSSy se integra muy bien con cualquier herramienta de construcción de su elección.

Instale la CLI de PostCSS

UsandoHilo:

yarn global add postcss-cli

onpm:

npm install -g postcss-cli

Una vez hecho esto, elpostcssestará disponible en su línea de comandos.

Este comando, por ejemplo, ejecuta el complemento autoprefixer en archivos CSS contenidos en la carpeta css / y guarda el resultado en el archivo main.css:

postcss --use autoprefixer -o main.css css/*.css

Más información sobre la CLI de PostCSS aquí:https://github.com/postcss/postcss-cli.

PostCSS proporciona una interfaz común a varias herramientas excelentes para su procesamiento CSS.

Estos son algunos de los complementos más populares, para obtener una descripción general de lo que se puede hacer con PostCSS.

Autoprefixer

Autoprefixeranaliza su CSS y determina si algunas reglas necesitan un prefijo de proveedor.

Lo hace de acuerdo con laPuedo usardatos, por lo que no tiene que preocuparse si una función necesita un prefijo, o si los prefijos que usa ahora no son necesarios porque están obsoletos.

Puedes escribir CSS más limpio.

Ejemplo:

a {
    display: flex;
}

se compila para

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

csssiguiente

https://github.com/MoOx/postcss-cssnext

Este complemento es elBabelde CSS, le permite usar características modernas de CSS mientras se encarga de transpilarlas a un CSS más digerible para los navegadores más antiguos:

  • agrega prefijos usando Autoprefixer (por lo que si usa esto, no es necesario usar Autoprefixer directamente)
  • te permite usarVariables CSS
  • te permite usar el anidamiento, como en Sass

ymucho más!

Módulos CSS

Módulos PostCSSle permite usar módulos CSS.

Los módulos CSS no forman parte del estándar CSS, pero son un proceso de paso de compilación para tener selectores de ámbito.

csslint

Linting te ayuda a escribir CSS correcto y evitar errores o trampas. losestilismoEl complemento te permite lint CSS en el momento de la construcción

cssnano

cssnanominimiza su CSS y realiza optimizaciones de código para tener la menor cantidad de código entregado en producción.

Otros complementos útiles

En el repositorio de PostCSS GitHub hay unalista completa de los complementos disponibles.

Algunos de los que me gustan incluyen:

¿En qué se diferencia de Sass?

¿O cualquier otro preprocesador de CSS?

El principal beneficio que ofrece PostCSS sobre los preprocesadores CSS como Sass o Less es la capacidad de elegir su propio camino y seleccionar las funciones que necesita, agregando nuevas capacidades al mismo tiempo. Sass o Less son "fijos", obtienes muchas funciones que podrías usar o no, y no puedes extenderlas.

El hecho de que "elija su propia aventura" significa que aún puede utilizar cualquier otra herramienta que desee junto con PostCSS. Aún puede usar Sass si esto es lo que desea, y usar PostCSS para realizar otras cosas que Sass no puede hacer, como autoprefijos o linting.

Puede escribir su propio complemento PostCSS para hacer lo que quiera.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: