La facilidad de la propiedad Shorthand en CSS

Usar el sentido horario

Muchos de nosotros usamos las hojas de estilo (CSS) a diario y cuando se aprende con la práctica a veces se nos escapa la teoría básica que aunque es muy sencilla, resulta útil en todo momento.

Para las hojas de estilo es imprescindible ahorrar espacio reduciendo y abreviando las reglas para conseguir mayor velocidad en nuestras páginas web, como sabemos hoy en día los dispositivos móviles acceden a las mismas páginas, pero tienen la peculiaridad que no son tan rápidas como los ordenadores y laptops.

Hay varias propiedades cuyos valores se pueden agrupar con lo que conseguimos ahorrar espacio visible y reducir el tamaño de los archivos.

Por ejemplo:

margin-top: 10px;
margin-bottom: 5px;
margin-right: 12px;
margin-left: 15px;

Se puede usar en reemplazo:

margin: 10px 5px 15px 20px;

Y el orden de los valores se definen de acuerdo a las manecillas del reloj o conocido como sentido horario:

10px » arriba.
5px » derecha.
15px » abajo.
20px » izquierda.

Una vez aprendida esta regla te será más fácil editar y crear tus hojas de estilo.