Acortar hoja de estilos CSS – Propiedades Shorthand

Muchas veces, nuestra hoja de estilos CSS, queda de un tamaño inmenso al terminar nuestro sitio. Pero CSS nos permite acortarla, haciendo uso de las propiedades Shorthand.

En este artículo te enseño como realizalo.

Dentro de CSS 2.1,  algunas propiedades permiten establecer simultáneamente varios valores diferentes. Se las denominan «propiedades shorthand» y todos los desarrolladores web profesionales deberían utilizarlas.

Estas propiedades shorthand poseen la gran ventaja de permitir crear hojas de estilos mucho más cortas y rápidas de leer.

Las seis propiedades shorthand disponibles en CSS 2.1. son:

font, maring, padding, border, background, list-style

Hagamos un ejemplo de aplicacion de propiedades shorthand.
Supongamos que tenemos el siguiente código CSS estándar:

[sourcecode language=’css’]
p {
font-style: normal;
font-weight: bold;
font-size: 2.5em;
font-family: Arial, sans-serif;
}
h2 {
background-color: #000000;
background-image: url(«imagenes/back-html.png»);
background-position: 20px 15px;
background-repeat: no-repeat;
}
div {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 7px;
margin-left: 20px;
padding-top: 31px;
padding-right: 52px;
padding-bottom: 10px;
padding-left: 8px;
}
[/sourcecode]

Este mismo código, aplicando shorthand, nos quedaria asi:

[sourcecode language=’css’]
p {
font: normal bold 2.5em Arial, sans-serif;
}
h2 {
background: #000 url(«imagenes/back-html.png») no-repeat 20px 15px;
}
div {
margin: 15px 20px 7px 20px;
padding: 31px 52px 10px 8px;
}
[/sourcecode]

Como observamos, pasamos de un codigo CSS standard de 22 lineas, a otro con propiedades shorhand de 10 líneas. Es menos de la mitad del largo original.

Esto hará el código mas accesible, y rápido de cargar.

Espero lo apliquen y me comenten como les fue.
Saludos!
Cristian