Cómo usar PostCSS para limpiar su diseño web

Supongamos que aprende sobre una función CSS realmente interesante, como el anidamiento. Pero cuando sigue adelante y lo prueba, se da cuenta de que el soporte es terrible y pasarán años antes de que finalmente pueda usarlo. Esto solía ser un gran problema en CSS hasta la introducción de preprocesadores como PostCSS.

Aprenda cómo PostCSS le permite usar CSS moderno y futuro hoy durante el desarrollo. Descubrirá exactamente qué es PostCSS, cómo puede usarlo y la mejor manera de aprovechar sus características.

Configuración del proyecto

Navegue a una carpeta vacía, cree un archivo llamado index.html y agregue el siguiente marcado HTML en el archivo:

html>
<htmlidioma="es">
<cabeza>
<enlacereal="hoja de estilo"href="src/estilos.css">
cabeza>
<cuerpo>
<pag>Párrafopag>
<división>divisióndivisión>
cuerpo>
html>

Este documento HTML representa un párrafo y elemento. También importa un archivo de hoja de estilo llamado

estilos.css que está dentro de la origen carpeta. Crea el archivo en el origen e incluya las siguientes reglas de estilo CSS:

cuerpopag {
color: naranja;
}
cuerpodivisión {
color: azul;
}
cuerpo {
mostrar: red;
}

Este CSS diseña el color de ambos elementos en la página y crea un diseño de cuadrícula. La mayoría de los navegadores admiten una sintaxis CSS normal como esta. Pero cuando tenga la vista puesta en la sintaxis más nueva, deberá incorporar PostCSS.

Creación de un proyecto Node.js e instalación de PostCSS

En términos simples, PostCSS le permite convertir CSS moderno en algo que la mayoría de los navegadores puedan entender; un proceso comúnmente conocido como transpiling. Esto es perfecto si desea probar propiedades CSS nuevas, experimentales o no estándar en su código que los principales navegadores pueden no admitir.

PostCSS también ofrece un rico ecosistema de complementos de JavaScript que puede instalar para habilitar ciertas funciones, como la minificación de CSS, la compatibilidad con colores y la compatibilidad con linting.

Para usar PostCSS, lo primero que debe hacer es inicializar un nuevo proyecto Node.js:

npm inicializar -y

Este comando generará un archivo package.json que contiene los valores predeterminados para su aplicación.

A continuación, instale tanto PostCSS como la CLI de PostCSS. El segundo paquete te permite ejecutar PostCSS desde la línea de comandos:

npm i --save-dev postcss postcss-cli

El --save-dev flag instala ambos paquetes npm como dependencias de desarrollo; solo usará PostCSS y sus complementos para procesar el código CSS durante el desarrollo.

Para empezar a usar PostCSS a través de la interfaz de línea de comandos, entra en tu paquete.json archivar y crear el simple compilar: css comando para transpilar con PostCSS:

"guiones": {
"construir: css": "postcss src/styles.css --dir destino -w"
}

Este comando tomará su CSS desnudo (almacenado en src/estilos.css), tranpile el código y luego envíelo en el destino carpeta. ejecutando el compilación npm: css El comando crea esta carpeta y la rellena con el estilos.css archivo que contiene código legible por navegador.

Cuando esté importando su CSS al HTML, asegúrese de importar desde la carpeta de destino donde está compilando su CSS, y no desde la carpeta de origen desde la que compila PostCSS. Este, en nuestro caso, es el dist carpeta, no la origen carpeta.

Si abre su sitio web en un navegador, verá que el sitio aún accede al CSS. Cada vez que realice cambios en el archivo fuente, PostCSS volverá a compilar el código y los cambios se reflejarán en la página web.

Uso de complementos de PostCSS

Hay cientos de Complementos posteriores a CSS para agregar prefijos, linting, soporte de nueva sintaxis y docenas de otras características a PostCSS. Después de instalar un complemento de PostCSS, lo activa dentro del postcss.config.js archivo: un archivo JavaScript que puede usar para configurar todas las configuraciones para PostCSS.

Instala el cssnano Complemento PostCSS con el siguiente comando:

npm i --save-dev cssnano

Una vez más, solo necesita guardar estas dependencias como dependencias de desarrollo. La razón es que todo esto sucede a medida que se desarrolla. No necesita PostCSS ni ninguno de sus complementos después de llevar el sitio a producción.

Para usar el complemento cssnano recién instalado, debe agregar el siguiente código dentro del postcss.config.js archivo:

constante cssnano = requerir("cssnano")
módulo.exportaciones = {
 complementos: [
 cssnano({
 Preestablecido: 'predeterminados'
 })
 ]
}

Ahora, si regresa a la terminal y vuelve a ejecutar el comando de compilación, esto minimizará el CSS de salida (es decir, hará que el código sea tan pequeño como sea humanamente posible). Entonces, cuando ingrese a un sitio listo para producción, hará que su CSS sea lo más pequeño posible.

Uso de funciones modernas como el anidamiento

Suponga que desea utilizar la sintaxis de anidamiento en su hoja de estilo, por lo que reemplaza el bloque de párrafo en src/estilos.css con este:

cuerpo {
 & pag {
color: naranja;
 }
}

Este código es el mismo que la versión en su código de inicio. Pero esto generará un error porque la sintaxis es muy nueva y la mayoría de los navegadores web no la admiten. Puede habilitar el soporte para esta sintaxis con PostCSS instalando el postcss-preset-env enchufar.

El complemento compila un montón de complementos diferentes para manejar CSS según la etapa en la que se encuentre. La etapa 0 representa las características súper experimentales que tal vez ni siquiera lleguen a CSS. Mientras que la etapa 4 es para características del lenguaje que ya forman parte de la especificación CSS.

Por defecto, presente-env utiliza características de la etapa 2 (que es más probable que se conviertan en CSS). Pero puede cambiar el escenario a lo que quiera en el archivo de configuración.

Para instalar el complemento, ejecute el siguiente comando:

npm i --save-dev postcss-preset-env

Entonces en tu postcss.config.js archivo, debe importar el complemento y registrarlo:

constante cssnano = requerir("cssnano")
constante postcssPresetEnv = requerir("postcss-preset-env")
módulo.exportaciones = {
 complementos: [
 cssnano({
 Preestablecido: 'predeterminados'
 }),
 postcssPresetEnv({ escenario: 1})
 ]
}

Solo debe pasar la etapa del nuevo código CSS que pretende usar. En este caso, asumimos que la función de anidamiento está en la etapa 1. Cuando vuelva a ejecutar el comando de compilación y verifique el navegador, verá que se compiló el código anidado en CSS estándar que el navegador puede entender.

Uso de PostCSS con marcos

Configurar PostCSS manualmente puede ser un poco molesto. Esta es la razón por la que casi todos los marcos modernos vienen con herramientas de agrupación (por ejemplo, Vite, Snowpack y Parcel), y estas herramientas tendrán soporte para PostCSS incorporado. E incluso si no lo hacen, el proceso de agregar compatibilidad con PostCSS es increíblemente fácil.

Recuerde siempre que Vite y la mayoría de los demás paquetes usan Sistema de módulos ES6, no CommonJS. Para evitar esto, necesita usar el importar declaración en lugar de requerir() en tus postcssconfig.js archivo:

importar cssnano de"cssnano"
// El código de configuración va aquí

Siempre que tenga los complementos instalados, todo funcionará bien.

Más información sobre SaSS

PostCSS es solo uno de las docenas de preprocesadores CSS disponibles actualmente. Uno de ellos es SaSS, que significa hojas de estilo sintácticamente asombrosas.

Aprender a usar otro preprocesador importante puede ser útil como desarrollador de CSS.