Es normal cuando hablamos de CSS mencionar el como definir las propiedades de forma acortada, algo que se hace muy normalmente cuando trabajamos con los margin y padding, y que comúnmente tiene como consecuencia que los que están comenzando con CSS olviden el orden.
Para el que no sepa de lo que estamos hablando, un ejemplo de definición de propiedades acortada, es la siguiente:
En el ejemplo es fácil darse cuenta que posición ocupa cada medida pero cuando estamos trabajando en CSS puede que no lo recordemos con tanta facilidad, para evitar eso en mi caso siempre hice lo mismo que adopte como regla.
Imaginen un reloj común y corriente, divido en cuartos:
- Al comenzar la aguja estaría a las 12:00, la aguja apunta hacia arriba (top)
- El reloj avanza hacia el siguiente cuarto 15:00, la aguja apunta hacia la derecha (right)
- El reloj avanza hacia el siguiente cuarto 18:00, la aguja apunta hacia abajo (bottom)
- El reloj avanza hacia el ultimo cuarto 21:00, la aguja apunta hacia la izquierda (left)
Y como una imagen dice mas que mil palabras:
Esta regla hizo que nunca mas olvide el orden correcto a la hora de colocar las distintas medidas. Espero que les sea de útil. 😀