Modos resumidos en CSS

Los modos resumidos, son una manera de ahorrar espacio y texto en nuestras propiedades CSS, consiste en meter en una simple linea todos lo valores que son necesarios para establecer las propiedades de un objeto o texto.


Pero las únicas propiedades que permiten esto son aquellas como margin, padding, border, font y background que tienen multiples subpropiedades exclusivas, por ejemplo; font tiene font-size, font-family, font-style, etcétera, que se pueden meter en la propiedad mayor font.

Esto tiene muchas ventajas, el problema viene de que puede en muchos aspectos hacer más complicadas las cosas para otros diseñadores web menos expertos, más si es para trabajos en grupo.

Las subpropiedades por otro lado no pueden contener los elementos de otras subpropiedades aunque sean del mismo tipo.

Ejemplos de resumir propiedades CSS con Font:

Modo normal

font-family:arial, helvética, sans-serif;
font-size:2em;
font-style:italic

Modo resumido

font: 2em italic arial, helvética, sans-serif;

Como pueden ver la diferencia es notable y ambas dan el mismo resultado (notese que los valores de font-family van al final).

Padding, Margin y la regla del reloj
En los casos especiales de Padding y Margin se aplican la regla del reloj donde los valores se ordenan: Arriba, derecha, abajo, izquierda, en sentido de las manecillas del reloj.

En el caso de padding, se tienen las propiedades (aprenda el orden): padding-top, padding-right, padding-botom y padding-left.

En modo normal

padding-top: 15px
padding.right: 5px
padding-botom:  15px
padding-left: 5px

En modo resumido lo podríamos poner como:

padding:15px 5px 15px 5px;

o como:

padding:15px 5px;

Esto es debido a que si arriba y abajo comparten el mismo valor y derecha e izquierda tienen la misma situación, por tanto se pueden expresar en valores verticales y horizontales, esto es, simplificar en dos valores simples.

El otro caso sería cuando el valor final, padding-left, es igual a padding-right, pero los valores de arriba y abajo son distintas.

En modo normal

padding-top: 9px
padding.right: 5px
padding-botom:  20px
padding-left: 5px

En modo resumido

padding:9px 5px 20px;

Como padding-top y padding-botom tienen diferente valor no podemos resumirlos más y tienen que ponerse según su orden: arriba, derecha, abajo, izquierda. Pero como el valor de padding-left, es igual a padding-right se permite excluir el último valor tomando como referente padding-right.

Así entonces resumir tiene enormes ventajas que cualquiera puede exprimir si tiene la suficiente paciencia y comprenda que, a veces, el lenguaje optimizado puede tener sus inconvenientes, sobre todo si se trabaja con gente inexperta que sólo aprende lo básico de CSS.