Cómo optimizar tu CSS en páginas simples

Esta guía es un recordatorio de que las soluciones sencillas siempre serán las más óptimas y plantea el escenario de un proyecto que solo cuenta con archivos HTML, CSS y JS (ningún framework fancy) como si viviéramos en los 90s. Lo que se plantea es una forma sencilla de generar archivos CSS minificados y optimizados para producción.

Lo primero que necesitarás es inicializar tu manejador de paquetes favorito ya sea npm o yarn.

Regularmente en mis proyectos utilizo tailwindcss ya que me ayuda a tener una base muy completa de donde partir y en mi experiencia gracias a ese framework escribo CSS.

Una vez inicializado tu manejador de paquetes tendrás que instalar las dependencias necesarias para optmizar el CSS y el framework de tu elección.

          
yarn add postcss cssnano autoprefixer tailwindcss
       
yarn add postcss-cli --global

Posteriormente lo que necesitará será crear un punto de entrada (raíz) desde donde ser importará todo el CSS y el archivo que se procesará. En mi caso se encuentra en /static/css/input.css.

Ese archivo deberá contener las siguientes tres líneas:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Hasta este punto hemos terminado de trabajar con estilos y archivos CSS. Ahora necesitaremos hacer un poco de copnfiguraciones. Necesitamos crear dos archivos en la raíz de nuestro proyecto con el siguiente contenido: postcss.config.js y tailwind.config.js

          
// tailwind.config.js

module.exports = {
  purge: [
    './**/*.html'
  ],
  theme: {
    extend: {},
  },
  variants: {},
}
          
                  
// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {},
  }
}

Por último necesitaremos crear nuestro scripts en el archivo package.json

// package.json
// Toma en cuenta que las rutas y nombres de archivos deberás especificarlos en función de tu proyecto.

"build": "npx tailwindcss-cli@latest build ./static/css/input.css -o ./static/css/main.css && npm run minfy",
"minfy": "postcss ./static/css/main.css --config minify --ext min.css --dir ./static/css"

Cómo optimizar tu CSS en páginas simples

Guía básica para optimizar tu CSS en páginas simples (HTML, JS y CSS)