Formateador CSS Gratis
Este formateador CSS gratuito convierte hojas de estilo minificadas o desordenadas en código legible con una declaración por línea, un espacio después de cada dos puntos e indentación automática de reglas. Los bloques anidados como consultas de medios se indentan un nivel más. Los comentarios, cadenas de texto y valores url() se mantienen exactamente como están escritos. Es ideal para desarrolladores que necesitan leer o editar una hoja de estilo que recibieron minificada.
CSS Beautifier
Generators and Converters
Sobre esta herramienta
El CSS minificado está escrito para navegadores, no para personas: cada regla ocupa una línea y encontrar un color o margen significa escanear miles de caracteres. Formatear restaura la estructura que hace que una hoja de estilo sea fácil de revisar.
La herramienta lee la hoja de estilo carácter por carácter, por lo que los puntos y comas dentro de direcciones de datos url() y las llaves dentro de cadenas de texto no la confunden. Cada selector inicia un bloque nuevo, cada declaración obtiene su propia línea con un espacio después de los dos puntos, y las reglas dentro de bloques de medios o soportes se indentan un nivel más profundo. Los comentarios permanecen donde estaban. Puedes elegir dos espacios, cuatro espacios o tabulaciones.
El formateo no cambia lo que hace el CSS ni corrige errores: una llave faltante se muestra como indentación que nunca regresa. Combínalo con el minificador CSS cuando quieras comprimir el archivo nuevamente antes de publicar. Nada de lo que pegues se almacena.
Preguntas frecuentes
¿El formateo cambia cómo funciona mi CSS?
No. Solo cambia el espacio en blanco entre reglas y declaraciones, por lo que el navegador lee exactamente las mismas instrucciones. Las cadenas de texto, comentarios y valores url() se copian sin cambios, lo que también protege imágenes de datos en línea.
¿Puede formatear SCSS o LESS?
CSS plano es el objetivo. Los bloques SCSS y LESS anidados simples generalmente se indentan correctamente porque las llaves se manejan de la misma manera, pero características como mixins con sintaxis inusual no se entienden, así que verifica el resultado antes de confiar en él.
¿Por qué una llave de cierre no regresa a la izquierda?
El formateador sigue tus llaves exactamente. Si a una regla le falta una llave de cierre, la indentación permanece profunda hasta el final del archivo. Esa es una forma rápida de encontrar la regla rota, pero necesitas agregar la llave faltante tú mismo.
¿Cómo lo hago pequeño nuevamente?
Mantén la versión formateada mientras trabajas, luego ejecútala a través del minificador CSS antes de publicar. El minificador elimina los comentarios y espacios en blanco nuevamente, así obtienes código fuente legible para editar y un archivo compacto para los visitantes.