Formatear CSS

Cómo funciona

La hoja de estilos de casi cualquier sitio publicado es un archivo .min.css apretado en una sola línea: 40 KB de reglas sin principio ni fin visibles. Pegue el código en el panel izquierdo. En el derecho, cada selector queda en su propia línea, cada propiedad (color: red;) también, y el interior de cada bloque lleva la sangría que eligió. Los bloques @media, @supports y @keyframes bajan un nivel más, así que ve de un vistazo dónde empiezan las reglas para teléfonos. Los selectores separados por coma (.tarjeta h2, .tarjeta h3) se ponen uno debajo del otro y los comentarios se quedan en su lugar. Las reglas anidadas de un archivo SCSS o LESS se despliegan igual; las variables como $color o @color no se tocan. La línea de resultado indica cuántas líneas tenía, cuántas tiene ahora y cuántos bloques de reglas encontró. Si cambia ¿Qué quiere hacer? a Minificado, la herramienta hace lo contrario: quita espacios y comentarios, acorta colores como #ffffff y deja el código en una línea. Las reglas no se fusionan y su orden no cambia.

Esta herramienta también se busca como formatear css, css formatter online, embellecer css, indentar css, css beautifier, formatear scss.

¿Qué es CSS?

El CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje que define colores, tipos de letra, márgenes y distribución de una página web. Cada regla une un selector (.tarjeta, h2, #menu) con pares propiedad: valor; entre llaves. El navegador ignora los espacios y saltos de línea entre reglas; por eso la misma hoja puede estar bien sangrada o aplastada en una línea y dar exactamente el mismo resultado en pantalla.

¿Qué es SCSS y LESS?

SCSS y LESS son preprocesadores: añaden al CSS variables, reglas anidadas y bloques reutilizables (mixins). El navegador no los lee directamente; un compilador los convierte primero en CSS normal. Su escritura se parece tanto al CSS que el mismo formateador puede darles sangría: una estructura anidada como .tarjeta { h2 { ... } } recibe un nivel de sangría más por cada paso.

¿Qué diferencia hay entre formatear y minificar CSS?

Las dos llevan el mismo código en direcciones opuestas. Formatear añade espacios y saltos de línea para que una persona pueda leerlo; el archivo crece y el significado no cambia. Minificar quita espacios y comentarios, acorta colores y números y, en el modo completo, fusiona reglas; el archivo se reduce y carga más rápido, pero cuesta leerlo. Para el navegador el resultado es el mismo: la diferencia está en quién tiene que leer el archivo.

¿Formatear cambia el CSS?

No. En el modo con sangría solo cambian espacios, saltos de línea y sangría; selectores, propiedades, valores y comentarios quedan idénticos carácter por carácter. El navegador ignora los espacios en el CSS, así que la página se ve exactamente igual. Por eso sirve para leer sin riesgo la hoja minificada de un sitio publicado, buscar un error o copiar una regla.

La herramienta no revisa nada: una llave de cierre que falta, un nombre de propiedad mal escrito o un punto y coma olvidado no se señalan; el código solo recibe sangría tal como está. Aun así, la sangría delata los errores: después de un bloque que nunca se cierra, todas las reglas siguientes quedan un nivel de más hacia la derecha.

¿Con sangría o minificado?

El CSS con sangría es para personas: leer, editar, compartir con un equipo. El CSS minificado es para el navegador: cuanto más ligero sea el archivo en el sitio publicado, antes se dibuja la página. Lo habitual es conservar el archivo con sangría en el proyecto y minificar al publicar.

La opción Minificado de esta página es prudente: solo quita espacios y comentarios, acorta colores y números, y no cambia el número ni el orden de las reglas. Los comentarios de licencia /*! se conservan. Para una minificación más profunda que fusiona reglas, con comparación de bytes antes y después, use la herramienta Minificar CSS.

• Leer, buscar errores, copiar una regla → Con sangría
• Publicar, incrustar en un correo → Minificado
• Archivo fuente SCSS/LESS → Con sangría (se minifica el CSS compilado)

Preguntas frecuentes

¿Cómo hago legible un archivo CSS minificado?

Copie el contenido del archivo y péguelo en el panel izquierdo de esta página. Cada selector y cada propiedad pasan a su propia línea y cada bloque recibe sangría. Puede copiar el resultado o descargarlo como archivo .css. Para tomar la hoja de estilos de un sitio abierto, use la pestaña Fuentes de las herramientas para desarrolladores del navegador.

¿Puedo formatear SCSS o LESS?

Sí. Las reglas anidadas, las variables y los selectores con & se despliegan y reciben sangría de la misma forma. La herramienta no compila SCSS ni ejecuta mixins (@mixin, @include); solo hace legible la estructura.

¿La herramienta avisa si mi CSS tiene errores?

No, no es un validador; el código con errores recibe sangría tal como está. Una llave sin cerrar suele notarse porque las reglas siguientes quedan un nivel de más. La herramienta Minificar CSS sí indica la línea y la columna de las partes ilegibles.

¿Mi código se envía a un servidor?

No. El formateo se hace por completo en su navegador; el código que pega no sale de esta página ni se guarda en ningún lugar.