Cómo funciona
El formateador de CSS reescribe un CSS comprimido o escrito en una sola línea con una indentación coherente y legible: cada propiedad en su línea, los selectores separados por saltos de línea y las reglas anidadas correctamente sangradas.
El CSS minificado que sale de una compilación, o el que copias del panel de código de las herramientas para desarrolladores del navegador, es un muro de texto. Encontrar la regla que quieres cambiar, entender la especificidad o revisar el CSS de un compañero es casi imposible sin darle formato.
Cómo se usa: pega cualquier CSS, ya sea normal, con sintaxis SCSS/SASS o con prefijos de fabricante copiados del navegador. El formateador coloca cada declaración en su línea, añade una línea en blanco entre bloques de reglas, sangra las reglas anidadas (en SCSS/Sass) y deja un espacio antes de la llave de apertura.
Convenciones que aplica: un espacio entre el selector y la llave de apertura, una declaración por línea con una indentación uniforme de dos o cuatro espacios, ningún espacio sobrante al final de las líneas, la llave de cierre en su propia línea, una línea en blanco entre bloques y el contenido de las consultas de medios sangrado un nivel más.
Casos de uso: leer el CSS del panel del navegador para entender cómo se han aplicado los estilos, dar formato al CSS copiado de una plantilla o un framework para ver su estructura, preparar CSS para una revisión de código y volver legibles archivos SCSS/SASS que se minificaron al compilar.
Preguntas frecuentes
- El formateador gestiona la sintaxis SCSS, incluidas las reglas anidadas, las variables ($var), los mixins (@mixin, @include) y las referencias al padre del estilo &:hover. El Sass puro (sintaxis indentada, sin llaves) no está admitido.
- No. El orden de las propiedades se conserva exactamente igual que en la entrada. Reordenarlas (alfabéticamente o por tipo: posicionamiento, modelo de caja, tipografía) es otra cuestión y el formateador no la toca.
- Los prefijos (-webkit-, -moz-, -ms-, -o-) se conservan exactamente como estaban, cada uno en su línea y con la misma indentación que el resto de declaraciones.
- Sí. Pega CSS minificado de cualquier origen y el formateador lo reestructura en algo legible, con una declaración por línea y la indentación correcta.
¿Puede formatear SCSS o Sass?
¿Reordena las propiedades del CSS?
¿Qué pasa con las propiedades con prefijo de fabricante?
¿Sirve para el CSS minificado de un CDN?
RankForge — Technical SEO Audit
Score any page out of 100, see every issue with the exact fix, generate JSON-LD schema and crawl up to 50 pages — all inside Chrome's side panel, with nothing sent to a server.