Formateador y minificador CSS

Cómo formatear o minificar CSS

1. Pega tu hoja de estilos o haz clic en Abrir un archivo para cargar un archivo .css (hasta 10 MB).
2. Elige la Indentación (2 espacios, 4 espacios o una tabulación) y si quieres una Línea en blanco entre reglas.
3. Haz clic en Formatear (embellecer) para obtener código legible, o en Minificar para obtener la versión más pequeña.
4. Para minificar, deja marcado Fusionar reglas al minificar para obtener el mejor resultado, y Conservar /*! comentarios */ para mantener las cabeceras de licencia.
5. Copia o descarga el resultado. La línea de estado muestra el tamaño antes y después, en bytes, y el porcentaje ahorrado.

Si falta una llave, la herramienta se detiene y te indica en qué línea está la { sin cerrar o la } sobrante, en lugar de producir un resultado roto.

Embellecer: CSS legible y coherente

Formatear (embellecer) usa js-beautify, el formateador que incluyen muchos editores de código. Coloca cada declaración en su propia línea, indenta el contenido de cada regla y de las reglas @ como @media y @supports, escribe cada selector de un grupo en su propia línea y añade un espacio después de los dos puntos de cada declaración. Las líneas en blanco existentes se conservan (como máximo una seguida), así que las secciones lógicas de tu archivo siguen siendo visibles. El formateador nunca cambia los valores, el orden de las reglas ni el significado de los selectores: solo modifica los espacios.

Resulta útil para leer el CSS minificado de un sitio web, revisar una hoja de estilos generada por una herramienta o poner orden en un archivo editado por varias personas con costumbres distintas.

Minificar: CSS más ligero con csso

Minificar usa csso (CSS Optimizer), un minificador estructural. Además de eliminar espacios y comentarios, reescribe la hoja de estilos en una forma equivalente y más corta:

• los colores se acortan (#ff0000 pasa a ser red, #ffffff pasa a ser #fff);
• las unidades y los ceros se simplifican (0px pasa a ser 0, 0.5em pasa a ser .5em);
• se eliminan las declaraciones duplicadas y se fusionan las propiedades abreviadas cuando es seguro;
• con Fusionar reglas al minificar, las reglas con declaraciones idénticas se agrupan (a{color:red} b{color:red} pasa a ser a,b{color:red}) y se descartan las declaraciones sobrescritas.

La reestructuración es segura en hojas de estilos normales, pero mueve declaraciones. Si tu CSS depende de un orden de cascada muy concreto, por ejemplo con hacks para navegadores, desmarca la opción: csso se limitará a comprimir cada regla en su sitio.

Los comentarios se eliminan, salvo los comentarios «importantes» que empiezan por /*!, que se suelen usar para las licencias. Desmarca Conservar /*! comentarios */ para quitarlos también.

Tamaño antes y después

La línea de estado compara el tamaño de la entrada y del resultado en bytes UTF-8. El código embellecido suele ser más grande que el original; el minificado ahorra normalmente entre un 20 y un 50 % en CSS escrito a mano. Recuerda que los servidores también comprimen los archivos con gzip o Brotli, así que el ahorro en la transferencia es menor que la cifra bruta, pero la minificación sigue reduciendo el tiempo de análisis y el tamaño de los archivos en caché.