Formateador de CSS
Formatea y embellece el código CSS. Expande CSS minificado, corrige la indentación, normaliza espacios en blanco y ordena propiedades opcionalmente.
Cómo usar Formateador de CSS
- 1Pega tu código CSS en el editor.
- 2Elige el tamaño de indentación (2 o 4 espacios).
- 3Habilita el ordenamiento opcional de propiedades para coherencia.
- 4Copia la salida CSS formateada.
ZenovayAnalytics
Analytics pensado para fundadores.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Formateador y Validador JSON
Formatea, valida y embellece datos JSON con resaltado de sintaxis y detección de errores.Decodificador JWT
Decodifica e inspecciona tokens JWT. Consulta el encabezado, la carga útil y verifica firmas.Base64 Codificar/Decodificar
Codifica texto a Base64 o decodifica Base64 a texto. Soporta UTF-8 y datos binarios.Codificador/Decodificador de URL
Codifica o decodifica componentes de URL. Maneja caracteres especiales, cadenas de consulta y URLs completas.Preguntas frecuentes
¿Qué hace el formateador de CSS?▾
El formateador toma CSS minificado o con formato inconsistente y lo reescribe con sangría, saltos de línea y espaciado consistentes. Cada bloque de selector obtiene su llave de apertura en la misma línea, cada propiedad en su propia línea con punto y coma final, y la llave de cierre en su propia línea. Las reglas arroba (@media, @keyframes, @supports) se manejan con formato anidado. El resultado es inmediatamente legible y compatible con diff.
¿Qué funciones de CSS son compatibles?▾
Propiedades y valores CSS estándar, pseudoclases (:hover, :focus, :nth-child), pseudoelementos (::before, ::after), selectores de atributo ([type="text"]), reglas arroba anidadas (@media, @supports, @keyframes, @layer, @container), múltiples selectores (separados por comas), propiedades personalizadas (--var-nombre) y funciones CSS modernas (clamp(), calc(), var()). Los comentarios CSS (/* ... */) se conservan.
¿Qué es la ordenación de propiedades?▾
Cuando la ordenación de propiedades está habilitada, las propiedades CSS dentro de cada bloque de reglas se ordenan alfabéticamente. Esto facilita la revisión de las hojas de estilo (siempre sabe que "background" viene antes que "color"), elimina debates sobre el orden de propiedades en las revisiones de código y produce diferencias más consistentes cuando se agregan propiedades. Herramientas como el plugin "order" de Stylelint hacen cumplir esto automáticamente.
¿Cambiará el formateador mis valores de CSS?▾
No — solo se modifican el espacio en blanco y la sangría. Los nombres de propiedades, valores, selectores y condiciones de reglas arroba se conservan exactamente tal como están. El formateador no normaliza colores, no añade prefijos de proveedor ni reescribe propiedades abreviadas. Es un reformateador puramente cosmético, no un preprocesador.
¿Cómo formateo CSS en mi flujo de trabajo?▾
Para flujos de trabajo en equipo, use Prettier con el plugin de CSS (prettier --write *.css) o Stylelint con la opción --fix. Ambos se integran con VS Code, ESLint y pipelines de CI. Para formateo puntual sin configuración de herramientas, use este formateador en línea. Para usuarios de PostCSS, el plugin postcss-prettify puede formatear CSS de forma programática.