Formateador CSS

Un formateador CSS lee una hoja de estilo y la reescribe con espacios, sangrías y saltos de línea consistentes para que sea fácil de leer y mantener. Analiza el CSS en su estructura subyacente de reglas, selectores, declaraciones, reglas at y comentarios, luego imprime esa estructura nuevamente usando un diseño predecible: una declaración por línea, un espacio único después de cada dos puntos y cada bloque anidado sangrado un nivel más profundo que su padre. Las reglas de estilo siguen siendo idénticas, pero un archivo que llegó como una línea larga e ininterrumpida se convierte en algo que puedes escanear y editar.

La misma herramienta funciona a la inversa como un minificador CSS. Minifying elimina cada espacio, pestaña, salto de línea y (opcionalmente) comenta que un navegador no necesita, colapsando la hoja de estilo al equivalente más pequeño byte por byte. Una hoja de estilo de 6 KB bien formateada a menudo cae por debajo de 4 KB una vez que se acaban los espacios en blanco, lo que significa menos bytes en la red y una primera pintura más rápida. Embellecer mientras escribes y depuras; Minifica la copia que envías a producción.

Este formateador comprende las partes de CSS que activan scripts ingenuos de búsqueda y reemplazo. Las reglas at anidadas como @media y @supports mantienen sus reglas internas sangradas correctamente, los bloques @keyframes con pasos porcentuales se conservan, las cadenas literales en el contenido y los valores de url() se dejan exactamente como están escritos y los comentarios se mantienen o eliminan a pedido. Todo se ejecuta completamente en su navegador, por lo que su hoja de estilo, incluidos los tokens de diseño propietarios o los nombres de clases internos, nunca se carga y la herramienta sigue funcionando después de que la página se ha cargado incluso sin conexión.

Una pequeña prueba muestra lo que hace este formateador CSS en línea. Pegue @media (ancho máximo:600px){.nav a,.nav button{padding:8px 12px;color:#333}} y haga clic en Embellecer con 2 espacios. La consulta de medios abre su propio bloque, el botón .nav a y .nav van en líneas separadas un nivel y cada declaración se asienta en su propia línea con un espacio después de los dos puntos. La insignia de tamaño dice 73 B → 98 B, +34%, porque la sangría agrega bytes. Haga clic en Minify en esa salida y volverá a los 73 bytes originales.