Las abreviaturas de CSS pueden reducir eficazmente el tamaño de los archivos CSS

Una métrica clave de la usabilidad de un sitio web es la velocidad, o más precisamente, la rapidez con la que aparece una página en la ventana del navegador de un visitante. Hay muchos factores que afectan la velocidad, incluida la velocidad de su servidor web, la conexión a Internet de su visitante y el tamaño del archivo que debe descargar el navegador. Aunque no puede controlar la velocidad de su servidor y su conexión, puede controlar el tamaño de los archivos que componen las páginas web de su sitio web.
Para hacer que los sitios web sean más rápidos, los creadores web comprimen y optimizan rutinariamente cada archivo de imagen en su sitio web, a menudo sacrificando la calidad de la imagen para reducir el tamaño del archivo en unos pocos puntos porcentuales. Dado que las hojas de estilo CSS son archivos de texto sin formato y relativamente pequeñas en comparación con las imágenes, los creadores web rara vez consideran tomar medidas para reducir el tamaño de sus archivos de hojas de estilo CSS. Sin embargo, mediante el uso de abreviaturas CSS y otros trucos sencillos, puedes reducir en gran medida el tamaño de tu hoja de estilos. En una prueba informal ad hoc de mis propias hojas de estilo, reduje el tamaño del archivo entre un 25% y un 50%.

Usando la naturaleza abreviada de CSS

Las propiedades abreviadas de CSS son nombres de propiedades especiales que se utilizan para reemplazar múltiples conjuntos de propiedades relacionadas. Por ejemplo, la propiedad padding es la abreviatura de padding-top, padding-right, padding-bottom y padding-left.

El uso de propiedades abreviadas le permite comprimir múltiples pares de propiedad/atributo en una sola línea de código en una hoja de estilo CSS. Por ejemplo, considere el siguiente código:


Reemplazarlo con algunas propiedades abreviadas puede reducir el código a lo siguiente, el efecto real de los dos es exactamente el mismo:


Tenga en cuenta que la propiedad abreviada también tiene varias propiedades, cada una de las cuales corresponde a una propiedad normal que se combina en la propiedad abreviada. Las propiedades están separadas por espacios en blanco.
Cuando las propiedades tienen valores similares, como en las mediciones lineales de propiedades de margen, el orden de las propiedades que siguen a la propiedad abreviada es importante. El orden de los atributos comienza en la parte superior (el borde superior está en blanco) y continúa en el sentido de las agujas del reloj alrededor del cuadro.
Si todas las propiedades de una propiedad de abreviatura son iguales, entonces simplemente puede enumerar la propiedad única y copiarla cuatro veces al frente. Por tanto, las dos propiedades siguientes son iguales:


De manera similar, puede representar pares de propiedades superior/inferior y derecha/izquierda usando dos propiedades después del margen del borde o las propiedades de espaciado.


El orden de los atributos no es importante cuando son valores diferentes. Por lo tanto, propiedades como el color del borde, el estilo del borde y el ancho del borde pueden seguir a la propiedad del contorno en cualquier orden. Ignorar un atributo equivale a omitir la propiedad general correspondiente de las reglas de estilo.
A continuación se muestra una lista de propiedades abreviadas de CSS y las propiedades generales que representan.

Fondo: archivo adjunto de fondo, color de fondo, imagen de fondo, posición de fondo, repetición de fondo
Borde: color del borde, estilo del borde, ancho del borde
borde inferior (borde inferior): color del borde inferior, estilo del borde inferior, ancho del borde inferior
borde izquierdo (borde izquierdo): color del borde izquierdo, estilo del borde izquierdo, ancho del borde izquierdo
borde derecho (borde derecho): color del borde derecho, estilo del borde derecho, ancho del borde derecho
borde superior (borde superior): color del borde superior, estilo del borde superior, ancho del borde superior
cue (señal de sonido): pre-cue, post-cue
fuente: fuente, tamaño de fuente, estilo de fuente, peso de fuente, variante de fuente, altura de línea, ajuste del tamaño de fuente, extensión de fuente
estilo de lista: imagen de estilo de lista, posición de estilo de lista, tipo de estilo de lista
margen (en blanco): margen superior, margen derecho, margen inferior, margen izquierdo
contorno: color del contorno, estilo del contorno, ancho del contorno
relleno: espacio superior, espacio derecho, espacio inferior, espacio izquierdo
pausa: pausa después, pausa antes

Reducir el espacio en blanco

Otra forma de reducir el tamaño de una hoja de estilos CSS es eliminar la mayor parte de los espacios en blanco innecesarios del documento. En otras palabras, coloque cada salto de regla en una sola línea de código, es decir, elimine las nuevas líneas y las sangrías que se insertaron originalmente en el código para separar cada propiedad/atributo en líneas separadas.
Por ejemplo, los siguientes ejemplos de código son idénticos en contenido, pero el segundo es mucho más refinado:


eliminar comentario

Eliminar comentarios de su código CSS es otra forma de reducir el tamaño del archivo. Aunque los comentarios son útiles para leer el código, no ayudan al navegador a generar sus páginas web. Muchos creadores web están acostumbrados a comentar cada línea de código, o al menos cada declaración de regla. Comentarios tan generosos rara vez son necesarios en las hojas de estilo CSS porque la mayoría de las propiedades y propiedades de CSS son fáciles de leer y comprender. Si utiliza nombres significativos para clases, ID y otros selectores, puede eliminar la mayoría de los comentarios y al mismo tiempo mantener su código legible y mantenible.


El uso de propiedades abreviadas, la eliminación de espacios en blanco inútiles y la omisión de comentarios pueden reducir en gran medida el tamaño de su archivo de hoja de estilos CSS. Esto, a su vez, hará una contribución pequeña, pero potencialmente notable, al objetivo general de acelerar su sitio web.