Herramienta de Formato CSS

El formateo CSS es el proceso de organizar código CSS desordenado en un formato estandarizado y legible. Un buen formateo CSS mejora la mantenibilidad del código, facilita la colaboración en equipo y ayuda a localizar rápidamente problemas de estilo. El formateo incluye: sangría consistente, alineación de propiedades, saltos de línea apropiados y optimización de selectores. La minificación elimina todos los espacios en blanco y comentarios, reduciendo significativamente el tamaño del archivo y mejorando la velocidad de carga de la página. En datos o bases de código productivas, el resultado debe revisarse después con parser, pruebas o reglas del proyecto.

El formateo CSS es un problema de tokenización + pretty-printing, no un análisis completo. Un analizador CSS conforme a la especificación (CSS Syntax Module Level 3, recomendación del W3C) es más pesado de lo que un formateador necesita: construye un AST con reglas de estilo, reglas @, declaraciones y valores de componente, y resuelve casos extremos de análisis (cadenas sin terminar, llaves desajustadas, propiedades con prefijos de proveedor). Esta página utiliza un tokenizador más ligero que recorre el flujo de caracteres, reconoce las mismas clases de tokens (identificador, palabra clave @, hash, cadena, cadena incorrecta, número, dimensión, porcentaje, url, función, puntuación, comentario) y los emite como una lista plana; luego el pretty-printer reensambla los tokens con la sangría elegida, el estilo de llaves y las reglas de espacios en blanco. Las dos unidades estructurales en CSS son los bloques de regla (selector { declaraciones }) y los bloques de regla @ (@media, @supports, @container, @keyframes envuelven uno o más bloques de regla). El formateador recorre un flujo de tokens y rastrea la profundidad de llaves: un `{` incrementa la profundidad (y se añade un salto de línea + sangría), un `}` decrementa la profundidad (y la sangría se reduce para coincidir con el `{` correspondiente). Los selectores se emiten tal cual, ya que el formateador no los analiza porque parsear un selector como `.foo > .bar:hover:not(.baz)` es un problema aparte (CSS Selectors Level 4). Los selectores se conservan byte a byte, solo normalizando espacios en blanco (múltiples espacios colapsados en uno, espacios finales eliminados) para que un `.a,.b,.c` minimizado se transforme en `.a, .b, .c`. Las declaraciones se formatean con un estilo elegido: 'expandido' (cada propiedad en su propia línea, el más legible), 'compacto' (una regla por línea, múltiples declaraciones empaquetadas, el más común en CSS de producción) o 'comprimido' (minimizado, sin espacios en blanco, la salida más pequeña posible). Los dos puntos después del nombre de la propiedad siempre van seguidos de un espacio; el valor se emite tal cual salvo algunas normalizaciones (ceros finales eliminados de `0.500` a `.5`, unidades eliminadas de `0px` a `0`, los trucos clásicos de minimización CSS). La minimización es la dirección inversa: eliminar comentarios, colapsar espacios en blanco dentro y entre declaraciones, eliminar el punto y coma final tras la última declaración de un bloque (válido según CSS 2.1 §4.1.7), fusionar bloques de regla adyacentes con el mismo selector y contexto de media, y normalizar valores de color (`#ffffff` -> `#fff`, `rgb(255,255,255)` -> `#fff` cuando sea posible). Los minimizadores modernos (cssnano, lightningcss, clean-css) también realizan optimizaciones estructurales: fusionar propiedades largas en abreviadas (`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`), eliminar declaraciones duplicadas dentro de una regla y eliminar reglas que no coinciden con ningún elemento (`div:has-no-children { color: red; }` en pasadas de eliminación de código muerto). Para la salida minimizada la página aplica las transformaciones estándar; para la salida legible la página aplica la sangría y el estilo de llaves elegidos. El módulo de anidamiento CSS (CSSWG, borrador 2023, Baseline 2024) introduce anidamiento nativo: `.a { color: red; & .b { color: blue; } }` es ahora CSS válido en navegadores modernos (Chrome 112+, Firefox 117+, Safari 16.5+). El anidamiento previo a 2024 requería reescrituras del preprocesador (Sass `&` o Less `&` para encadenar selectores). La página maneja ambos: CSS anidado por preprocesador se formatea como si fuera SCSS / Less (preservando el `&`), y CSS anidado nativo (sin necesidad de `&`) se formatea mediante el recorrido de bloques de regla sin distinción. Otras reglas @ que maneja la página: @keyframes y @counter-style toman un cuerpo de declaraciones, no bloques de regla anidados, por lo que se formatean de manera diferente (declaraciones dentro de la regla @, sin llaves anidadas). @media, @supports, @container, @layer toman un cuerpo de bloques de regla. @import, @charset, @namespace son solo de nivel superior y se emiten en su propia línea. @property (propiedades personalizadas registradas) toma un bloque de declaraciones. @font-face es un solo bloque de regla con un bloque de declaraciones complejo sin selector. La página trata cada una según la forma de cuerpo definida en la especificación, no por su nombre. El error de formateo más común es romper el contenido dentro de literales de cadena: `content: "hello world";`, `font-family: "Arial Black", sans-serif;`, `background: url("image.png")` — el formateador no debe colapsar el espacio dentro de la cadena, no debe dividir la URL por `/` y no debe tocar el texto del comentario dentro de `/* ... */`. Un tokenizador que rastrea correctamente el estado de cadenas y comentarios es la diferencia entre un formateador que preserva el contenido del usuario y uno que lo corrompe. El tokenizador de esta página está hecho a mano y es lo suficientemente pequeño para verificarlo a simple vista; los formateadores de producción usan postcss o lightningcss, que llevan la misma obligación en sus léxicos internos.

• Análisis léxico (CSS Syntax Level 3): recorrer el flujo de caracteres y emitir tokens identificador / palabra clave @ / hash / cadena / número / dimensión / porcentaje / url / función / puntuación / comentario. Las cadenas y comentarios tienen estado: un tokenizer mal implementado rompe `content: "hello world";`.
• Dos unidades estructurales: bloques de regla (selector { declaraciones }) y bloques de regla @ (@media, @supports, @container, @layer envuelven bloques de regla). El formateador rastrea la profundidad de llaves e indenta cada `{` a un nuevo nivel; el `}` correspondiente reduce el nivel.
• Los selectores se emiten tal cual, con espacios en blanco normalizados: `.a,.b,.c` -> `.a, .b, .c`. El formateador no analiza selectores (CSS Selectors Level 4 es un problema aparte), solo limpia espacios y comas.
• Estilos de salida: 'expandido' (una declaración por línea, el más legible), 'compacto' (una regla por línea, común en producción), 'comprimido' (sin espacios en blanco, minimizado). Los dos puntos + espacio después del nombre de la propiedad son la única regla de formato universal.
• Minimización: eliminar comentarios, colapsar espacios en blanco, eliminar `;` final, fusionar reglas con mismo selector, normalizar `#ffffff` -> `#fff`, `0.500` -> `.5`, `0px` -> `0`. Fusiones estructurales: propiedades largas -> abreviadas (`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`).
• CSS Nesting (CSSWG 2023, Baseline 2024): `.a { & .b { ... } }` es ahora CSS nativo en Chrome 112+, Firefox 117+, Safari 16.5+. El anidamiento con preprocesador previo a 2024 (Sass `&`, Less) sigue siendo válido; la página formatea ambos recorriendo la estructura de bloques de regla.
• Cuerpos de reglas @: @keyframes y @counter-style toman declaraciones; @media / @supports / @container / @layer toman bloques de regla; @import / @charset / @namespace son sentencias de nivel superior; @property y @font-face toman bloques de declaraciones. La página trata cada una según la forma de cuerpo definida en la especificación, no por su nombre.
• Límite de seguridad: los literales de cadena (content, nombres de fuentes, URLs) y el texto de comentarios no se modifican en ninguna transformación. Un recorrido byte-exacto es la prueba de corrección para un formateador CSS: rompe una cadena de contenido y el usuario lo nota inmediatamente.