Mi regla para recordar las propiedades acortadas CSS

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:

metodo acortado css

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:

propiedad acortada css

Esta regla hizo que nunca mas olvide el orden correcto a la hora de colocar las distintas medidas. Espero que les sea de útil. :D

Tags:

Escrito por Pablo

Programador con más de 10 años de experiencia, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

El Martes, Diciembre 1st, 2009 a las 9:32 y fue guardada bajo Programación.

Compartir esta entrada

Entradas relacionadas

11 Comentarios en “Mi regla para recordar las propiedades acortadas CSS”

  1. Sésar de la Isla Dice:
    Diciembre 1st, 2009 a las 10:23

    Con la de veces que me he roto la cabeza con esta historia y lo tonta que era la soluciónv;-) . Gracias!!

  2. Pablo Dice:
    Diciembre 1st, 2009 a las 10:39

    @Sésar de la Isla: jejeje, me alegro que sirva :D

  3. Martin Dice:
    Diciembre 1st, 2009 a las 10:42

    Otra solucion…. Recordar esto les causa PROBLEMAS? entonces, en inglés, esto es un TRouBLe, Top, Right, Bottom, Left.. se dan cuenta? jeje

  4. Sésar de la Isla Dice:
    Diciembre 1st, 2009 a las 11:19

    Creo que me quedo con la opción de Kabytes… Aunque la de Martin no está nada mal. Supongo que me daré cuenta de cuál es la mejor el día que tenga que pensar de nuevo en esto. Lo primero que se me venga a la cabeza, eso será. ;-)

  5. Alberto Dice:
    Diciembre 1st, 2009 a las 20:48

    Jaja, muchas gracias!
    No me aclaraba yo mucho con esto, y siempre tenía que andar buscándolo cuando se daba el caso… ahora seguro que lo recordaré.

  6. Arveja Dice:
    Diciembre 1st, 2009 a las 21:05

    Me viene al pelo, siempre me olvido de esto y termino poniendo las 4 propiedades en lugar de 1.

  7. Pablo Dice:
    Diciembre 2nd, 2009 a las 15:02

    @Martin me gusto esa! jeejjee no la tenia, muy copada!

    @Alberto @Arveja: Me alegro que sirva!

  8. Borja Dice:
    Diciembre 4th, 2009 a las 17:22

    Yo tb lo recuerdo así!!
    jeje, pensaba q era el único q tenía problemas para recordarlo. ;)

    un saludo.

  9. Cómo recordar facil las propiedades acortadas CSS | Summarg Dice:
    Diciembre 14th, 2009 a las 19:39

    [...] que una buena opción es anotarselo en un machete. Pero hace poco me encontré con la técnica de Pablo de Kabytes en donde utiliza como referencia el movimiento de las agujas de un reloj. De este modo, utilizamos [...]

  10. Erwin Dice:
    Febrero 5th, 2010 a las 22:29

    Puxa man eres lo max! siempre tenia ese problemilla de recordar la posicion al poner las medidas, (Y)

  11. tekio Dice:
    Febrero 17th, 2010 a las 8:54

    Me pasaba lo mismo. Nunca me acordaba del orden exacto… ahora no creo que lo olvide.

    Gracias.

Deja tu comentario

Seguir comentarios por RSS