Orden de declaración

Al momento de declarar propiedades en CSS, recomiendo y sigo la forma en que lo hace Mark Otto, pues la forma en que lo hace tiene bastante sentido al igual que le agregamos organización a nuestro código.

  1. Posicionamiento
  2. Modelo de caja (Box model)
  3. Tipografía
  4. Visual
.clase {

    /* Posicionamiento */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;

    /* Modelo de caja */
    display: inline-block;
    float: right;
    width: 250px;
    height: 250px;
    margin: 20px;
    padding: 2px;

    /* Tipografía */
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.5;
    color: #fff;
    text-align: center;

    /* Visual */
    border: 1px solid black;
    background-color: red;
    border-radius: 3px;

    /* Otros */
    opacity: 1;
    transition: .3s

}

Se empieza por el posicionamiento porque aquí componemos el flujo de nuestro elemento, si llegamos a mover alguna propiedad puede que todo colapse, en el modelo de caja, definimos los tamaños y comportamientos de nuestro componente.

La parte de la tipografía y lo visual no tiene impacto sobre lo anterior, lo cual viene bien para definir como es que queremos que se muestre nuestro contenido.

Finalmente la parte extra vendría siendo las propiedades que no entran en todo lo anteriormente mencionado, como pueden ser las animaciones.

Puedes usar los comentarios como ayuda, si esta forma de declaración te resulta un tanto complicada en un principio, pero con la práctica te aseguro que te sera más fácil hacerlo con una mejor organización para tu código.

results matching ""

    No results matching ""