¿Cómo usar esta herramienta?
- Pegue su código CSS en el campo de entrada, por copia o arrastrar y soltar.
- Pulse Formatear, el CSS embellecido aparece al instante.
- Copie el resultado al portapapeles con el botón de copia.
¿Qué hace el formateador?
El formateador CSS toma cualquier código CSS y lo estructura en un formato legible. Los selectores y declaraciones reciben sus propias líneas, las llaves se colocan correctamente y las propiedades dentro de los bloques de regla se sangran con dos espacios. Las estructuras anidadas como CSS-Nesting nativo, @media queries, animaciones @keyframes, @layer y @container se sangran limpiamente en cada nivel.
El resultado es un código CSS con formato coherente, directamente utilizable en code reviews, documentación y comunicación de equipo.
¿Cuál es la fórmula de conversión?
El formateador trabaja por reglas en tres pasos:
-
Tokenización, el código CSS se descompone en tokens: selectores, propiedades, valores, llaves, puntos y comas, comentarios y literales de cadena. Comentarios y cadenas se tratan como bloques opacos y nunca se modifican.
-
Detección de estructura, las llaves abiertas (
{) marcan el inicio de un nuevo bloque de sangría, las cerradas (}) reducen el nivel. Los puntos y comas terminan una declaración y crean un salto de línea. Esta lógica funciona recursivamente para estructuras anidadas a cualquier profundidad. -
Formato, cada declaración recibe su propia línea con 2 espacios de sangría por nivel de anidamiento. Los espacios y saltos de línea superfluos se normalizan. Los selectores están en una línea, seguidos de la llave abierta.
Ejemplo: body{margin:0;padding:0}.container{display:flex;gap:1rem} se convierte en:
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
gap: 1rem;
}¿Qué ejemplos de uso existen?
Entradas típicas y su resultado formateado:
| Entrada | Resultado formateado |
|---|---|
body{margin:0} |
Selector + propiedad en sus propias líneas, sangrados |
@media(min-width:768px){.nav{display:flex}} |
@media y .nav cada uno un nivel más abajo |
@keyframes fade{from{opacity:0}to{opacity:1}} |
Keyframes con from/to correctamente sangrados |
.card{color:red;/* comentario */font-size:1rem} |
Comentario conservado, propiedades en sus propias líneas |
a{&:hover{color:blue}} |
Nesting nativo con profundidad de sangría correcta |
El formateador encaja para stylesheets de cualquier tamaño, desde reglas aisladas hasta design systems extensos con media queries y container queries anidados.
¿Qué áreas de uso existen?
Code reviews y pull requests, el CSS minificado o con formato incoherente en stylesheets dificulta la revisión. Un formato coherente hace los cambios reconocibles de un vistazo y reduce las preguntas en el equipo.
Depuración y búsqueda de errores, cuando las DevTools del navegador o los pipelines de build sacan CSS comprimido, el resultado suele ser un único bloque de texto. El formateador descompone el código en bloques legibles y ayuda a encontrar rápidamente selectores erróneos o propiedades sobrescritas.
Documentación y formación, el CSS formateado en páginas wiki, style guides o ficheros README es notablemente más fácil de leer que los one-liners minificados. Especialmente en materiales de onboarding, un CSS limpiamente sangrado ahorra tiempo.
Preguntas frecuentes
Las respuestas a las principales preguntas están arriba en el bloque FAQ, se emiten como JSON-LD estructurado (FAQPage) para los motores de búsqueda.
¿Qué herramientas de desarrollador están relacionadas?
Otras herramientas del ecosistema kittokit que encajan con el tema:
- Formateador JSON, formatear y validar código JSON crudo con sangría de 2 espacios.
- Formateador SQL, embellecer consultas SQL con reconocimiento de palabras clave y sangría de cláusulas.
- Formateador XML, hacer legibles documentos XML con reconocimiento de etiquetas y sangría jerárquica.
Última actualización: