Eliminar CSS no utilizado online
Pegue el HTML y el CSS, y conserve solo las reglas que coinciden con algo de la página.
Eliminar CSS no utilizado online
PurgeCSS popularizó la idea: comparar una hoja de estilos con el marcado que la usa y descartar toda regla que no coincide con nada. Esta página lo hace en su navegador. Abre el eliminador de CSS no utilizado en su pestaña HTML + CSS, donde pega la página y su hoja de estilos, y nada sale de su equipo.
Qué se conserva
- Una regla con al menos un selector que coincide con un elemento del HTML.
- Un selector con un estado o un pseudoelemento, como
.btn:hovero.icon::before, cuando existe el elemento sin esa parte. - Todo lo que esté en Conservar siempre: nombres de clase, ids con o sin
#, y patrones entre barras. - Cualquier selector que el navegador no pueda analizar, en lugar de adivinar.
@font-facesiempre, y@keyframesmientras una regla conservada o un estilo en línea siga nombrando la animación.
Las clases que no se ven
El HTML que pega es una instantánea. Los scripts añaden clases mientras la página funciona: un menú abierto, una diapositiva activa, una cabecera fija, un error de validación. Sus reglas parecen no usadas porque la instantánea no tiene ningún elemento con esas clases. Póngalas en Conservar siempre. Los frameworks y los maquetadores suelen compartir un prefijo, así que un solo patrón como /^is-/ o /^elementor-/ cubre toda una familia. Si puede grabar la página en Chrome, la página Coverage JSON a CSS ve lo que el navegador aplicó realmente, incluidas esas clases de tiempo de ejecución.
Un ejemplo
Una landing page basada en Bootstrap que usa una rejilla, una barra de navegación y dos estilos de botón sigue cargando el framework entero. Pegue la página y la hoja de estilos, añada a Conservar siempre las clases que alterna la barra de navegación, como show y collapsing, y la mayor parte del framework desaparece. La lista Selectores eliminados muestra lo que se ha ido, y es el lugar más rápido para detectar una clase que debería haberse quedado.
Online o en la compilación
Para una página suelta, una plantilla o un correo, esta página es más rápida que instalar nada. Para un sitio que cambia, ejecute PurgeCSS en la compilación para que el CSS se limpie de nuevo cada vez que cambia el marcado: npx purgecss --css css/style.css --content index.html --output dist/css/. En cualquier caso, pruebe la página en todos los anchos antes de sustituir la hoja de estilos original.