Eliminá el CSS que no usás y hacé tu web más liviana

Tu hoja de estilos puede tener miles de líneas... pero el usuario solo ve unas pocas. Eliminar el CSS no utilizado es una forma brutal de reducir peso muerto en tu sitio y mejorar la velocidad de carga.

¿Por qué es un problema tener CSS no utilizado?

Con el tiempo, los archivos CSS crecen: se agregan clases, se cambian componentes, se dejan estilos viejos... y nada se borra. Esto hace que tu hoja de estilos sea más grande de lo necesario y cargue contenido que el navegador ni siquiera va a usar.

Más peso = más tiempo de carga. Y además, más código que mantener.

¿Cómo saber qué CSS no se está usando?

Una forma rápida es usar la pestaña "Coverage" de las DevTools de Chrome:

Abrí tu sitio en Chrome.
Presioná F12 → pestaña "Sources" → menú de 3 puntos → "Coverage".
Hacé clic en "Start instrumenting coverage" y navegá por el sitio.
Vas a ver qué porcentaje del CSS está realmente en uso.

Herramientas para eliminar CSS no utilizado

Si querés automatizar el proceso, estas son las más recomendadas:

PurgeCSS: analiza tu HTML y JS para eliminar clases no usadas del CSS.
Unused-CSS: herramienta online que escanea tu sitio.
Extensiones para navegador como "Unused CSS Finder".

¿Y si usás Tailwind o Bootstrap?

Frameworks como Tailwind o Bootstrap generan muchas clases que no siempre usás. Por eso:

Con Tailwind, usá su modo JIT y asegurate de configurar content[] en tailwind.config.js.
Con Bootstrap, considerá compilar una versión personalizada con solo los módulos que necesitás.

Consejo: automatizá en tu flujo de trabajo

Si usás herramientas como Webpack, Vite o Gulp, podés integrar PurgeCSS como parte del proceso de build. Así siempre generás una hoja de estilos limpia y optimizada.

¿Hay riesgo de borrar de más?

Puede pasar, sobre todo con clases generadas por JavaScript o en plantillas que se cargan dinámicamente. Para evitarlo:

Marcá esas clases como "safelist" en la configuración de PurgeCSS.
Hacé pruebas en staging antes de aplicar en producción.

Conclusión

Eliminar CSS no utilizado es una de esas tareas que cuesta encarar, pero que tiene un gran impacto en performance. Menos peso, menos mantenimiento, y más velocidad. Tu sitio (y tus visitantes) te lo van a agradecer.