PostCSS: cómo reducir hojas de estilo CSS, eliminando los selectores que sobran (vídeo)
Tags: webdev, spanish, video
Published: 2020-10-07 10:30:03

---
title: PostCSS: cómo reducir hojas de estilo CSS, eliminando los selectores que sobran (vídeo)
published: true
date: 2020-02-04 08:00:00 UTC
tags: WebDev, Spanish, Video
cover_image: https://www.campusmvp.es/recursos/image.axd?picture=/2020/1T/purgecss-portada.png
canonical_url: https://www.campusmvp.es/recursos/post/postcss-como-reducir-hojas-de-estilo-css-eliminando-los-selectores-que-sobran.aspx
---

Aunque todo profesional del desarrollo Web que se precie debe [dominar HTML y CSS,](https://www.campusmvp.es/recursos/catalogo/Product-HTML5-y-CSS3-a-fondo-para-desarrolladores_185.aspx) la realidad es que en la mayor parte de los proyectos normalmente hacemos uso de **alguna biblioteca o _framework_ CSS** , como por ejemplo [Bootstrap](https://www.campusmvp.es/recursos/catalogo/Product-Dise%C3%B1o-Web-Responsive-con-HTML5,-Flexbox,-CSS-Grid-y-Bootstrap_212.aspx) (que es la más utilizada) o herramientas similares.

Utilizar un _framework_ CSS nos permite **maquetar muy rápido** , dar un **aspecto atractivo** por defecto a las aplicaciones, y **[tener ya hechas muchas cosas complicadas](https://dev.to/campusmvp/bootstrap-42---spinners-notificaciones-toast-interruptores-y-otras-novedades-l0f)**. Pero, por otro lado, utilizar un _framework_ implica que **estamos añadiendo gran cantidad de cosas a la aplicación que jamás vamos a utilizar**.

Por ejemplo, si creas una aplicación sencilla con Bootstrap utilizando tan solo la facilidad de maquetación con su rejilla (aunque hoy en día [con CSS Grid y Flexbox](https://www.campusmvp.es/recursos/catalogo/Product-Dise%C3%B1o-Web-Responsive-con-HTML5,-Flexbox,-CSS-Grid-y-Bootstrap_212.aspx) no lo necesitarías) y tomando el aspecto por defecto de botones y cuadros de texto, estarás añadiendo a la aplicación unos 156KB de tamaño con la versión minimizada del CSS de Boostrap. Sin embargo, **si analizas el uso real que estás haciendo** de las reglas incluidas, verás que es mínimo y **te llegaría con un porcentaje pequeño** del contenido de ese archivo.

Lo puedes ver en este mini-vídeo en el que tengo una página muy sencilla con unas cuantas secciones para maquetar texto e imágenes, abro la página en Chrome y empleo su herramienta para análisis de cobertura de código:

{% youtube hTdEbVaLtoE %}

Como puedes comprobar, **casi el 96% del código de la hoja de estilos de Bootstrap no se utiliza** para nada. El resto, para esta página en concreto, no lo necesitamos.

Pero claro, hacer esto manualmente es una tarea propensa a errores y, además, lamentablemente las herramientas de cobertura de Chrome no nos dejan exportar a un archivo tan solo lo que se identifica como que está en uso.

**En el siguiente vídeo** te explico paso a paso cómo puedes **sacar partido a la estupenda herramienta [PurgeCSS](https://purgecss.com/)** para automatizar el análisis y limpieza de los archivos CSS que emplee tu aplicación web Front-End y acabar con aplicaciones más ligeras y más rápidas. Para ello utiliza un pequeño sitio web con algunas páginas bastante complejas, y que se apoya en el uso de diversas bibliotecas y mucho CSS.

Vamos a verlo:

{% youtube xN3w49LSMYo %}

Todo lo explicado se puede automatizar con **npm** , **Gulp** o **Webpack** e incorporarlo al proceso de desarrollo de tu aplicación.

Puedes aprender a dominar todas estas herramientas de desarrollo Front-End y muchas más, para ser mejor profesional, con nuestro curso de [Herramientas modernas para desarrollo Web Front-End empresarial](https://www.campusmvp.es/recursos/catalogo/Product-Herramientas-modernas-para-desarrollo-Web-Front-End-empresarial_243.aspx). Háblalo con tu empresa o invierte por tu cuenta en mejorar tu perfil profesional 😉

¡Espero que te resulte útil!