Tratar de maquetar una web con CSS, nos puede dar como resultado un montón de lineas, y dependiendo del sitio, un archivo CSS bastante pesado.

Para tratar de remediar esto en la medida de lo posible, siempre podemos echar mano de las propiedades resumidas, que es, exactamente lo que parece. Escribir varias propiedades en una.

De esta forma, si queremos especificar un estilo, ancho y color para nuestro borde, en lugar de escribir tres lineas:

podemos resolverlo solo con una:

Si se omite algún valor se asume el valor computado:

background
background-color
background-image
background-repeat
background-attachment
background-position

border
border-width
border-style
border-color

font
font-style
font-variant
font-weight
font-size/line-height
font-family

list-style
list-style-type
list-style-position
list-style-image

margin
margin-top
margin-right
margin-bottom
margin-left

outline
outline-color
outline-style
outline-width

padding
padding-top
padding-right
padding-bottom
padding-left

Para las propiedades margin, border y padding, podemos controlar aspectos como el color, en ancho o estilo asignando de uno a cuatro valores.

Veamos como ejemplo como controlar los colores de los bordes de una capa como esta:

Si solo especificamos un valor, este es asumido por los cuatro lados de nuestra caja:

Si solo asignamos dos valores, el primero se aplica a los lados superior e inferior y el segundo a el derecho e izquierdo:

Si asignamos tres valores, el primero se aplica a los lado superior, el segundo a el derecho e izquierdo y el tercero al inferior:

Si asignamos los cuatro valores, se van aplicando en orden, empezando por el superior y en el sentido de las agujas del reloj, es decir: superior - derecho - inferior - izquierdo.

Si eres más de relojes digitales o de mirar la hora en el movil, quizas prefieras usar la regla mnemotécnica TRouBLe (Top - Right - Bottom - Left)

Siempre me costó recordar el comportamiento de estas propiedades abreviadas en los casos en los que se asignan dos o tres valores.

Para tratar de recordarlo, imagino los cuatro lados de la caja emparejados dos a dos, es decir, arriba - abajo y derecho - izquierdo.

Ahora bien, si solo asigno dos valores, y sigo el sentido de las agujas del reloj, estoy especificando un valor para "arriba" y otro para "derecha", "abajo" e "izquierda" no estan asignados, así que asumen el valor de su pareja correspondiente.

Si escribo tres valores, el único que no tiene un valor asignado directamente es "izquierda" (seguimos con el sentido horario), que asumirá el de su pareja, en este caso el valor asignado a "derecha".

Se que es una paranoia, pero no se me ocurre método mejor, así que si le sirve de ayuda a alguien, pues mejor que mejor.

Si tienes un método mejor que el mio para recordar esto (no creo que sea dificil) no dudes en dejarlo en un comentario.