Qué son las propiedades Shorthand en CSS

Anuncio:

Hoy vamos a ver qué son las propiedades Shorthand en CSS. Las propiedadades Shorthand en CSS nos permiten asignar varios valores a una propiedad en una sola línea. Puedes verlo más a fondo en la definición que hace Mozilla de Shorthand en inglés.

Veamos un ejemplo de propiedad Shorthand con las siguientes definiciones iguales:

Definición de una clase en CSS:

.mi_clase {
   margin-top: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
   margin-left: 5px;
}

Definición de la clase CSS usando la propiedad Shorthand:

.mi_clase {
   margin: 5px 5px 5px 5px;
}

Y te podrás preguntar, ¿Qué beneficio tienen las propiedades Shorthand en CSS? Pues algunos, y la verdad, importantes.

Según mi criterio, el primer beneficio de las propiedades Shorthand en CSS es la optimización, la velocidad de carga de cara al SEO. Y ¿por qué? Porque teniendo en cuenta que muy a ojo de buen cubero, un caracter es un byte, tenemos que, con la primera definición usamos 99 caracteres / 99 bytes aproximadamente, incluyendo los espacios en blanco, intros y tabulaciones,  con la definición Shorthand usamos 41 caracteres / 41 bytes. Como ves, has optimizado casi un 60% la cantidad de información que viaja del servidor al cliente, por tanto has reducido la velocidad de carga y por ende, te beneficiará de cara al posicionamiento en Google. Interesante ¿verdad?

Aquí quiero hacer una aclaración. En la definición de ambas clases, para indentar el código he usado espacios en lugar de tabulaciones. Y tienes que saber, que usar tabulaciones es mucho más eficiente que usar espacios. Esto es porque un tabulador cuenta como un carácter/byte mientras que para conseguir el mismo nivel de indentación hay usar varios espacios y por tanto el tamaño del archivo final será mayor.

Y para mí, el segundo beneficio que tienen las propiedades Shorthand en CSS es la claridad en la definición. Al menos, a mi me resulta más legible la definición Shorthand que la normal.

Como ves, algo que parece no tener importancia nos proporciona dos beneficios importantes a la hora de desarrollar nuestros sitios web.

Puedes aprender más en nuestra sección de CSS.

Espero que te haya sido de utilidad!

• CSS3