Acerca de Formateador de CSS
El formateador CSS de hidevtool ordena estilos copiados de DevTools, bundles minificados o entregables de diseño. Pega una hoja o fragmento y embellece para revisión o minifica para salida tipo producción.
Las reglas ganan sangría y saltos de línea coherentes; selectores, declaraciones y at-rules quedan intactos para diff o pegado de vuelta en tu proyecto.
Formatea antes del PR; minifica para demos inline — el FAQ cubre @layer, reglas anidadas y mensajes de error al minificar.
Qué puedes hacer
Embellecer CSS
Formatear expande CSS compacto en bloques indentados — cada selector y declaración en líneas legibles, con espacio entre reglas. Funciona en snippets parciales y hojas completas, incluidos @media y @keyframes cuando la sintaxis es válida.
Minificar CSS
Minificar quita comentarios y colapsa espacio en blanco tras un pase de embellecido exitoso, produciendo una cadena más corta estilo una línea para embeds, demos o chequeos de tamaño.
@media y @keyframes
At-rules anidadas indentan con sus selectores internos para que breakpoints responsive y bloques de animación sigan legibles en code review.
Custom properties y anidamiento
Sintaxis moderna de selectores anidados y declaraciones var(--token) formatean como reglas estándar cuando el parser acepta el dialecto que pegaste.
Casos de uso
¿Cómo formateo CSS en línea?
Pega tu CSS en la entrada y pulsa Formatear. Indentará selectores y propiedades para que @media anidados y listas largas de declaraciones se lean mejor.
¿Cómo embellezco CSS minificado de un build?
Pega el bundle en una línea o el snippet de DevTools y ejecuta Formatear. Se restauran saltos y sangría de dos espacios; selectores y valores no cambian.
¿Cómo minifico CSS para producción?
Pulsa Minificar tras pegar CSS. Se quitan comentarios y espacios extra para copiar una hoja compacta.
Preguntas frecuentes
- ¿Cómo formateo CSS en línea?
- Pega tu CSS en la entrada y pulsa Formatear. Indentará selectores y propiedades para que @media anidados y listas largas de declaraciones se lean mejor.
- ¿Cómo embellezco CSS minificado de un build?
- Pega el bundle en una línea o el snippet de DevTools y ejecuta Formatear. Se restauran saltos y sangría de dos espacios; selectores y valores no cambian.
- ¿Cómo minifico CSS para producción?
- Pulsa Minificar tras pegar CSS. Se quitan comentarios y espacios extra para copiar una hoja compacta.
- ¿Diferencia entre formatear y minificar CSS?
- Formatear añade sangría y líneas en blanco para humanos. Minificar compacta el mismo CSS válido a menos caracteres para transferencia o uso inline.
- ¿Por qué falla la minificación de CSS?
- El minificador reportó un problema de sintaxis — a menudo una llave sin cerrar, @rule mal formada o pegado truncado. Formatea primero para ubicar la línea rota y vuelve a minificar.
- ¿Puedo formatear SCSS o LESS aquí?
- Este formateador apunta a CSS plano. Preprocesa SCSS/LESS en tu pipeline o pega la salida CSS compilada de DevTools.
- ¿Minificar elimina reglas no usadas?
- No — solo quita espacio en blanco y comentarios. Usa PurgeCSS o tu bundler para dead-code elimination.