Minificación de CSS: consejos y herramientas

Aprender a escribir CSS limpio y optimizado requiere mucha práctica y un deseo inconsciente y compulsivo de limpiar. Mantener su CSS ordenado no se trata solo de su loca necesidad psicológica de estar limpio; sin embargo, especialmente para sitios más grandes, hará que las páginas se carguen más rápido. Tiempos de carga más rápidos equivalen a una mejor usabilidad y una mayor satisfacción del usuario.

Mucha gente tiene histeria de códigos. Esto no es malo.

Este artículo resumirá las técnicas que puede utilizar para optimizar su CSS, así como algunas herramientas de compresión en línea y de escritorio que pueden comprimir su código automáticamente.

Comprimir o no comprimir

Antes de discutir cómo comprimir CSS, es importante tener en cuenta que a menudo existe un equilibrio entre la compresión y la legibilidad del código. Muchos programadores se enorgullecen de la organización limpia de su CSS y no quieren que su código se ejecute a través de un compresor para eliminar comentarios y saltos de línea. Como diseñador, debes analizar los objetivos del código que escribes. Si está creando un sitio web pequeño que solo requiere unas pocas líneas de CSS, es posible que no sea necesario realizar una compresión adicional. Del mismo modo, si está escribiendo código que debe compartirse con un equipo abierto, insertar comentarios adicionales y saltos de línea puede ahorrarles mucho tiempo a sus colegas y ganarse su más sincero agradecimiento. Sin embargo, si está diseñando un sitio web grande que requiere mucho CSS, definitivamente querrá prestar atención al tamaño de su archivo y mantenerlo lo más pequeño posible.

Puede llevar algún tiempo encontrar la combinación perfecta entre compresión y posibilidad, pero vale la pena explorar ambas y lograr un equilibrio entre ellas puede facilitar mucho el trabajo. Al mismo tiempo, es obvio que la compresión no conduce necesariamente a una disminución de la legibilidad. Hay muchas técnicas disponibles para comprimir código que dan como resultado un código mejor y más organizado.

Con eso en mente, comencemos viendo algunas técnicas para mantener los archivos CSS al mínimo.

Definición de estilo en blanco

Empecemos por lo obvio. Si tiene un estilo en blanco, deséchelo. No pongas excusas de que podrías necesitarlos más tarde y sabes que son un desastre. No los agregue a menos que tenga una razón válida.

abreviatura

La abreviatura CSS es una forma de combinar varias líneas de CSS en una sola línea. Adquirir el hábito de utilizar todos los trucos de abreviaturas que conoce puede reducir significativamente la cantidad de líneas de código que termina escribiendo. Aquí hay un ejemplo:

Versión larga:

 #contenedor {
    parte superior acolchada : 5px
    relleno-derecha : 10px
    fondo de relleno : 30px
    relleno-izquierda : 18px
}

Versión abreviada:

 #contenedor {
    relleno : 5px 10px 30px 18px ;
}

Para obtener más información sobre las abreviaturas de CSS, puede visitar los siguientes artículos:

Sprites CSS

La idea original detrás de los sprites CSS era reducir la cantidad de solicitudes HTTP para acelerar los tiempos de carga de la página. La forma en que Sprite logra este objetivo es combinar varias imágenes en un solo archivo de imagen, generalmente una imagen con formato de cuadrícula. Cada imagen individual se muestra cambiando la posición de fondo de la imagen del sprite más grande. Para el código CSS, el uso de la tecnología sprite puede mejorar en gran medida la reutilización y la capacidad de mantenimiento del código, lo que reducirá significativamente la cantidad de código CSS.

Para obtener más información sobre CSS Sprites, consulte el tutorial de Chris Coyier sobre CSS-Tricks:

Por supuesto, Front-End Observation también tiene algunos artículos y consejos valiosos sobre CSS Sprites .

Reducir comentarios

Me gusta usar comentarios en mi código. Cuantos más comentarios agrego, más rápido puedo navegar visualmente por las diferentes partes del código. Sin embargo, si necesita CSS altamente optimizado que utilice pocos recursos, los comentarios excesivos consumirán bytes preciosos. Por lo tanto, intente eliminar todos los comentarios innecesarios y vuelva a formatear los que debe mantener en la menor cantidad de bytes posible.

Tipo de fuente razonable (font-Family)

Cuando el tamaño del archivo sea un gran problema, no incluya fuentes alternativas en su familia de fuentes. Deshágase de cualquier equipaje innecesario y reduzca sus opciones adicionales a una o dos.

Antes:

 #contenedor { familia de fuentes : Palatino , Georgia , Times , serif }

después:

 #contenedor { familia de fuentes : Palatino , serif }

Con respecto a las fuentes, recomiendo encarecidamente leer " Tres charlas sobre fuentes web predeterminadas " escritas por Yu Bo. También vale la pena leer y pensar en varios artículos mencionados en el artículo.

Usar color hexadecimal

Para reducir la cantidad de bytes, todos los valores de color RGB se convierten a sus valores hexadecimales correspondientes. Puede que esto no signifique mucho para empezar, ¡pero cualquier byte vale la pena!

Antes:

 #contenedor { color : rgb ( 131 , 100 , 219 ) ;​

después:

 #contenedor { color : # 8364DB }

Eliminar saltos de línea

Revise cada atributo de estilo y elimine las devoluciones que no sean necesarias. También puedes eliminar el último punto y coma.

Antes:

 #contenedor {
    margen : 5px ;
    relleno : 5px 10px 30px 18px ;
}

después:

 #contenedor { margen : 5px ; relleno : 5px 10px 30px 18px }