Formateador y embellecedor CSS gratuito

Qué hace realmente el formateo de CSS

Un formateador de CSS (también llamado «beautifier» o «pretty-printer») toma CSS en cualquier forma -salida de producción minificada, fragmentos de una sola línea pegados desde el inspector del navegador, hojas de estilos escritas a mano con indentación inconsistente- y lo reemite con indentación convencional, saltos de línea y formato consistente de selectores y declaraciones. El parser de CSS del navegador ignora los espacios en blanco al parsear, así que la página renderizada se ve idéntica independientemente de cómo esté maquetada la fuente. La cuestión es puramente la legibilidad humana: la jerarquía indentada hace visible la anidación de @media, una propiedad por línea permite que tus ojos recorran rápido las declaraciones de una regla, y un formato consistente en todo el codebase agiliza la revisión de diffs. Los cuatro flujos del mundo real: (1) depurar CSS minificado de producción pegado desde el Inspector de DevTools para averiguar por qué una regla no está aplicando; (2) reformatear CSS extraído del panel «Computed» del navegador para compararlo con la fuente; (3) normalizar diferencias de formato del equipo tras un merge de un colaborador que usa otras convenciones; (4) preparar CSS para revisión de código cuando la fuente se ha degradado a líneas compactas.

Los principales formateadores de CSS

js-beautify (Einar Lielmanis, desde 2007) es el formateador histórico del ecosistema JavaScript; su mitad CSS es lo que mueve la cara pública de beautifier.io y ha alimentado históricamente decenas de sitios «format CSS online». Prettier (James Long, enero de 2017; soporte CSS añadido en v1.4 el 3 de junio de 2017) es el formateador opinionated que llegó a dominar el ecosistema frontend moderno. La filosofía de diseño de Prettier es «casi sin configuración»: un solo estilo de indentación (2 espacios por defecto), un objetivo de ancho de línea, ajuste de líneas predecible. Es el formateador por defecto para CSS en VS Code cuando la extensión Prettier está instalada. Stylelint (David Clark + Maxime Thirouin, 2015) es más un linter que un formateador, pero soporta format-on-save mediante la opción --fix y es la elección de facto para hacer cumplir convenciones CSS en todo un equipo: sus más de 100 reglas integradas cubren desde «sin selectores duplicados» hasta «preferir hex sobre rgb()» pasando por «solo comillas simples». clean-css (Jakub Pawlowicz, 2011) minifica principalmente, pero tiene un modo «beautify» que invierte la operación. Los cuatro acaban parseando CSS a través de PostCSS (Andrey Sitnik, comenzado el 7 de septiembre de 2013), el parser CSS universal que mueve la mayor parte del ecosistema CSS moderno (Autoprefixer, cssnano, el procesado de Tailwind). Para proyectos modernos en 2026, Prettier al guardar es el valor por defecto; esta herramienta en el navegador es para casos puntuales fuera de cualquier contexto de proyecto.

Convenciones de indentación y selectores

Las convenciones CSS en 2026 se inclinan claramente hacia indentación de 2 espacios: el valor por defecto en Prettier, la fuente de Tailwind, el Code Guide de Bootstrap, el Google CSS Style Guide y la mayoría de paquetes CSS publicados en npm. La convención más antigua de 4 espacios persiste en algunos codebases heredados. Las tabulaciones son raras específicamente en CSS (más comunes en JS/TS). Para los selectores: las listas de selectores separadas por comas se escriben convencionalmente uno por línea (.btn,<br>.btn-primary,<br>.btn-secondary {), lo que hace fácil añadir o quitar un selector sin recolocar la línea. Los combinadores (>, +, ~) suelen llevar un espacio a cada lado. Las cadenas de pseudoclases (:hover:focus) van pegadas. Los selectores universales (*) y los combinadores de descendencia (el espacio implícito) son neutros para el formateador.

Formato de declaraciones

Una declaración por línea es el valor por defecto moderno: color: red; en su propia línea, padding: 10px; en la siguiente. La alternativa «compacta» (varias declaraciones en una sola línea) es rara en el CSS de producción hoy; la mayoría de los equipos se han movido a una-por-línea por legibilidad y diffs limpios. Un solo espacio tras los dos puntos: color: red; y no color:red;. Punto y coma final en la última declaración: técnicamente opcional según la spec de CSS, pero todo formateador moderno lo incluye por amabilidad con los diffs -añadir una propiedad nueva no exige modificar la línea anterior. Línea en blanco entre reglas: opcional y dependiente del equipo. Prettier conserva las líneas en blanco de la entrada en lugar de imponer un estilo concreto. Entrecomillado de propiedades: los nombres de fuente con espacios requieren comillas (font-family: "Helvetica Neue", sans-serif;); las URL se entrecomillan por convención (url("image.png")) aunque sin comillas también es válido. Normalización de valores: palabras clave en minúsculas (RED → red), abreviatura hex (#FFFFFF → #fff), eliminación de unidad cero (0px → 0): la mayoría pertenece a un minificador más que a un formateador, pero algunos formateadores aplican las que son sin pérdidas.

Casos CSS especiales

Las consultas @media anidan sus reglas con un nivel extra de indentación, haciendo visualmente obvia la estructura condicional. Los bloques @keyframes contienen reglas en porcentaje (0% { ... }, 100% { ... }) que anidan del mismo modo. Las declaraciones @font-face tienen varios pares src/format que salen ganando si van uno por línea. Las propiedades CSS personalizadas (--brand-color: #3b82f6;) se formatean como cualquier otra declaración, pero el nombre de la propiedad preserva la caja (los nombres de propiedades personalizadas son sensibles a mayúsculas/minúsculas, a diferencia de las propiedades estándar). Las expresiones calc() requieren espacios alrededor de los operadores: calc(100% - 20px) es correcto, calc(100%-20px) es CSS inválido. Los formateadores preservan los espacios necesarios dentro de calc() mientras normalizan el contexto de alrededor. CSS Nesting (CSS Nesting Module Level 1, baseline 2023+), una característica relativamente nueva que permite que las reglas anidadas indenten bajo su padre, ha cambiado cómo manejan los formateadores la sintaxis anidada; Prettier moderno y Stylelint entienden la sintaxis nativa.

Ordenar propiedades: una convención sorprendentemente disputada

Algunos equipos imponen un orden de propiedades dentro de cada regla. Compiten tres convenciones. Alfabético (la opción «Ordenar propiedades» de esta herramienta): la más simple, fácil de imponer mecánicamente, convierte «¿está X ya declarada aquí?» en un vistazo rápido. El Google CSS Style Guide recomienda alfabético con concesiones para los prefijos de proveedor. Por concepto (posicionamiento → modelo de caja → tipografía → visual → animación): agrupa propiedades relacionadas. El libro de arquitectura SMACSS popularizó este enfoque. Por tipo (display primero, luego modelo de caja, luego texto, luego varios): variante del «por concepto» con agrupaciones más rígidas. La regla order/properties-order de Stylelint soporta cualquiera de ellas vía configuración. Ninguna de las tres mejora el renderizado; la elección depende puramente del modelo mental que te resulte más fácil al ojear una regla. Esta herramienta ofrece el orden alfabético como toggle opt-in; para las otras convenciones necesitarías un archivo de configuración de Stylelint en un proyecto real.

El pipeline moderno de CSS

Para proyectos con pipeline de build, el valor por defecto en 2026 es Prettier ejecutándose al guardar en tu editor y Stylelint en cada commit vía Husky + lint-staged. VS Code trae Prettier como formateador por defecto para archivos CSS, SCSS y LESS cuando la extensión está instalada. Los hooks pre-commit vía Husky ejecutan Stylelint y Prettier sobre los archivos en stage antes de permitir el commit. Las comprobaciones de CI ejecutan stylelint --check y prettier --check en los pull requests. Tras el formateo en desarrollo, el CSS de producción pasa por cssnano (basado en PostCSS, el estándar moderno de minificación), que invierte todo lo que hizo el formateador para producir los bytes comprimidos que se envían. Nada de esto importa para fragmentos puntuales pegados desde otro sitio: precisamente para eso está esta herramienta en el navegador. Para el trabajo de proyecto a largo plazo, configura Prettier + Stylelint en local; la herramienta en el navegador es la opción sin fricción para todo lo demás.

Casos de uso comunes

• Revisión de código. Hace legible CSS minificado o compacto antes de compartirlo con un compañero.
• Depuración. CSS bien formateado hace instantáneamente visible qué selectores están aplicando y qué declaraciones están siendo sobrescritas.
• Refactorización. Entender la estructura de una hoja de estilos que no escribiste es mucho más fácil con un formato consistente.
• Limpieza desde el inspector del navegador. El botón «Copiar regla» de DevTools produce CSS compacto y difícil de leer; formatéalo antes de pegarlo en tu hoja de estilos.
• Minificación de producción. El toggle «Modo minify» invierte el formateo: útil para desplegar CSS a producción donde cada byte importa.
• Estandarización de equipo. Casa con las convenciones de formato del equipo antes de enviar un PR.

Privacidad: por qué importa el solo-navegador aquí

El CSS rara vez contiene secretos explícitos, pero las hojas de estilos propietarias revelan información sobre la taxonomía interna de clases del sitio, los tokens del design system, hipótesis de tests A/B codificadas en nombres de selectores, y características no entregadas. Los formateadores del lado servidor suben tu CSS a un servicio de terceros donde queda en registros. Esta herramienta se ejecuta enteramente en tu navegador vía JavaScript: verifícalo en la pestaña Red de DevTools mientras pulsas Formato, o pon la página fuera de línea (modo avión) tras cargarla y el formateador seguirá funcionando. Seguro para hojas de estilos propietarias, archivos source-of-truth de design systems, variantes de tests A/B o cualquier CSS que no quieras ver copiado en el disco duro de un desconocido.

Preguntas frecuentes

¿Qué es la beautificación de CSS?

La beautificación (también «formateo» o «pretty-printing») reformatea el código fuente CSS para hacerlo más legible: añadiendo indentación adecuada, saltos de línea entre reglas, declaraciones a una propiedad por línea, espaciado consistente alrededor de los dos puntos. La salida renderizada por el navegador es idéntica porque el parser de CSS ignora los espacios en blanco al parsear. El objetivo es la legibilidad humana para revisión de código, depuración y edición, no un cambio en el aspecto de la página.

¿Cuándo debería usar CSS minificado?

El CSS minificado retira todo espacio en blanco innecesario y es la elección correcta para el despliegue en producción: reduce el tamaño del archivo entre un 20 y un 40 % antes de la compresión Brotli en el borde de la CDN, y cada byte que sale del camino de renderizado crítico importa para los Core Web Vitals (especialmente LCP). El CSS embellecido es para desarrollo, revisión de código y depuración. Los pipelines de build modernos (Vite, webpack, Parcel, Astro, Next.js) minifican automáticamente en builds de producción vía cssnano o Lightning CSS, así que para el trabajo de proyecto típicamente escribes CSS embellecido y tu bundler emite la versión minificada.

¿Qué hace «ordenar propiedades alfabéticamente»?

Ordena alfabéticamente las declaraciones dentro de cada regla: border antes que color antes que display antes que margin. Algunos equipos imponen el orden alfabético porque convierte «¿X ya está declarada aquí?» en un vistazo rápido y evita discusiones sobre propiedades duplicadas en la revisión de código. El Google CSS Style Guide recomienda alfabético (con concesiones para los prefijos de proveedor). Otros equipos prefieren un orden «por concepto» (posicionamiento → modelo de caja → tipografía → visual → animación, popularizado por SMACSS). Ninguno de los órdenes afecta al renderizado: elección puramente cosmética / de convención de equipo.

¿Qué hace «una propiedad por línea»?

Pone cada declaración en su propia línea: color: red; en una línea, padding: 10px; en la siguiente, en lugar de empaquetarlas en una sola línea. El valor por defecto moderno en esencialmente todo el CSS de producción, porque hace más limpios los diffs (añadir una propiedad = añadir una línea, no modificar una) y hace cada declaración más fácil de leer por separado. Lo contrario -varias declaraciones por línea- es raro en el código de producción de 2026 fuera de fragmentos muy compactos de una sola regla.

¿Debería usarla si mi proyecto ya usa Prettier o Stylelint?

Probablemente no: la integración de Prettier en tu editor está haciendo esto al guardar, con plena consciencia del AST de CSS vía PostCSS, y Stylelint impone las convenciones del equipo en cada commit. Esta herramienta es para los casos que tu pipeline de build no cubre: CSS pegado desde el inspector del navegador, fragmentos de correo o de Stack Overflow, formateo puntual fuera de cualquier contexto de proyecto. Para el trabajo de proyecto a largo plazo, configura Prettier + Stylelint en local; para trabajo puntual sin fricción, esta herramienta es la forma adecuada.

¿Se suben mis archivos CSS?

No. El formateo se ejecuta enteramente en tu navegador vía JavaScript. El CSS que pegas nunca cruza la red: verifícalo en la pestaña Red de DevTools mientras pulsas Formato, o pon la página fuera de línea (modo avión) tras cargarla y la herramienta seguirá funcionando. Seguro para hojas de estilos propietarias, archivos source-of-truth de design systems, variantes de tests A/B o cualquier CSS que no quieras ver copiado en el disco duro de un desconocido.

Herramientas relacionadas