Formateador CSS
Embellece o comprime CSS con un clic, con ordenacion alfabetica de propiedades. Compatible con @media, @keyframes y todas las at-rules estandar.
¿Esta herramienta resolvió tu problema?
Preguntas frecuentes
Que hace el embellecimiento de CSS?
El embellecimiento CSS (formateo) toma CSS comprimido o escrito de manera inconsistente y lo reformatea: cada declaracion en su propia linea, indentacion correcta dentro de los bloques de reglas y lineas en blanco entre reglas para mejorar la legibilidad. Es puramente cosmetico — los estilos renderizados son identicos.
Que es la ordenacion de propiedades y por que usarla?
La ordenacion de propiedades reordena las declaraciones alfabeticamente (A→Z) dentro de cada bloque de reglas. El CSS ordenado es mas facil de examinar para encontrar propiedades especificas y ayuda a evitar duplicados. Las guias de estilo como el orden alfabetico ayudan a los equipos a mantener la consistencia en toda la base de codigo.
La compresion CSS afecta la apariencia de la pagina?
No. La compresion CSS elimina espacios en blanco, comentarios y el ultimo punto y coma en los bloques de reglas, todos semanticamente insignificantes. Los navegadores interpretan el CSS comprimido y formateado de manera identica. El CSS comprimido es tipicamente un 20-40% mas pequeno que el CSS formateado.
Soporta consultas @media y @keyframes?
Si. Las at-rules como @media, @keyframes, @supports y @font-face son reconocidas y sus bloques internos se indentan correctamente. @import y @charset (que no tienen bloque) se formatean como sentencias de una sola linea.
Puede manejar SCSS o Less?
El formateador maneja la sintaxis CSS estandar y procesara las porciones CSS validas de archivos SCSS/Less. Las caracteristicas especificas de SCSS como variables ($var), anidamiento y mixins (@mixin) pueden no formatearse correctamente ya que no son sintaxis CSS estandar.
Como autoformateo CSS en mi proyecto?
Usa Prettier con una configuracion .prettierrc, o Stylelint con el preset stylelint-config-prettier. Para proyectos Tailwind CSS, el plugin Tailwind Prettier puede ordenar las clases de utilidad. El formateador CSS integrado de VS Code (Shift+Alt+F) tambien sirve para formateo local rapido.