Cómo usar el formateador de CSS
- Pega tu CSS en el cuadro de entrada: una hoja de estilos minificada, un fragmento de las herramientas para desarrolladores o un archivo completo.
- Haz clic en Embellecer para poner cada declaración en su propia línea con una sangría coherente.
- Haz clic en Minificar para eliminar los comentarios y los espacios en blanco; la herramienta muestra cuántos bytes has ahorrado.
- Copia el resultado en tu proyecto.
Todo el procesamiento se hace en tu navegador, y tus hojas de estilo nunca se suben ni se guardan.
¿Por qué formatear o minificar CSS?
CSS (hojas de estilo en cascada, o Cascading Style Sheets) describe cómo se muestra el HTML. Una hoja de estilos es una lista de reglas, cada una formada por un selector y un bloque de declaraciones (property: value;). Los navegadores ignoran casi todos los espacios en blanco, así que las mismas reglas pueden escribirse de forma legible o comprimirse en una sola línea.
Embellecer sirve cuando necesitas leer o editar un CSS que llegó minificado, por ejemplo un tema de terceros o una hoja de estilos que estás depurando en un sitio en producción. Minificar es para producción: quitar los comentarios, los saltos de línea, la sangría y el último punto y coma de cada bloque hace los archivos más pequeños, de modo que se descargan más rápido. La minificación complementa, y no sustituye, la compresión gzip o Brotli en el servidor.
Aquí tienes la misma regla de las dos formas:
.btn-primary:hover,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-primary:hover,
.btn-primary:focus {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}Errores comunes de CSS y cómo corregirlos
Los navegadores no se detienen ante un error de CSS. Saltan la declaración o la regla no válida y siguen, y por eso un error tipográfico suele provocar que solo un estilo «deje de aplicarse en silencio». El CSS formateado hace estos problemas mucho más fáciles de encontrar.
Falta un punto y coma. La declaración siguiente queda absorbida por el valor anterior y ambas dejan de ser válidas:
.title {
color: #222
margin-bottom: 1rem;
}Añade el punto y coma después de #222. En la salida embellecida, que dos propiedades acaben en la misma línea lógica es una pista clara.
Llaves desequilibradas. Si falta una }, las reglas siguientes pasan a formar parte del bloque anterior. Si tras formatear la sangría salta de pronto un nivel, busca la llave que falta justo encima.
Faltan las unidades. Salvo el cero, las longitudes necesitan una unidad: margin: 10; no es válido, margin: 10px; es correcto. Los valores sin unidad solo son válidos en las propiedades que aceptan números simples, como line-height, opacity o z-index.
Selectores no válidos en una lista. Si un selector de una lista separada por comas no es válido, se descarta toda la regla. Esto ocurre a menudo con los pseudoelementos específicos de cada fabricante:
/* Si alguno de los selectores no es compatible, ninguno recibe el estilo */
input::-webkit-input-placeholder, input::-moz-placeholder { color: #888; }Escribe reglas separadas, o usa el estándar ::placeholder.
¿Es seguro minificar?
Eliminar los espacios en blanco es seguro en casi todos los casos, pero algunos detalles importan:
| Situación | Qué conviene saber |
|---|---|
calc() | Los espacios alrededor de + y - son obligatorios. calc(100% - 2rem) funciona; calc(100%-2rem) no. Un minificador correcto los conserva. |
| Comentarios de licencia | Por convención, muchos minificadores conservan los comentarios que empiezan por /*! por las licencias. Revisa la salida si dependes de ello. |
Cadenas y content | Los espacios en blanco dentro de cadenas entre comillas forman parte del valor y deben conservarse. |
| Trucos (hacks) | Los antiguos trucos para navegadores que dependen de una sintaxis exacta pueden no sobrevivir a la minificación. |
Consejos y buenas prácticas
- Guarda el código fuente legible en el control de versiones y genera los archivos minificados durante la compilación, idealmente con mapas de origen (source maps) para depurar.
- Agrupa las declaraciones relacionadas de forma coherente (disposición, modelo de caja, tipografía, aspecto visual) para que las reglas sean fáciles de recorrer.
- Usa propiedades personalizadas de CSS (
--brand: #0b5ed7;) en lugar de repetir los valores de color. - Para los bloques
<style>en línea dentro del marcado, el Formateador de HTML puede resultar más cómodo.
Preguntas frecuentes
¿Minificar el CSS cambia el aspecto de mi sitio?
No. Un minificador correcto solo elimina los caracteres que el navegador no necesita, como los comentarios y los espacios en blanco fuera de las cadenas. La página renderizada debería ser idéntica.
¿Cuánto más pequeño quedará mi CSS?
Depende de cómo se escribió el archivo. Las hojas de estilos muy comentadas y con mucha sangría se reducen más que las que ya son compactas. La herramienta muestra el tamaño exacto antes y después para tu archivo.
¿Puedo deshacer la minificación del CSS?
Sí, eso es lo que hace Embellecer. Se restauran la sangría y los saltos de línea, pero los comentarios eliminados durante la minificación no se pueden recuperar.
¿Admite SCSS o Less?
La herramienta está pensada para CSS plano. El SCSS sencillo suele formatearse de forma aceptable, pero funciones como las reglas anidadas con mixins o las operaciones de Less pueden no tratarse correctamente.
Actualizado