Diseño

Después de haber simplificado las etiquetas margin y padding de nuestro css, hoy vamos aprender a simplificar la etiqueta «border«.

Muchas veces nos encontramos la etiqueta borde de nuestro CSS de la siguiente forma:

#div {

     border-width: 1px;

     border-style: solid;

     border-color: #666666;

}

o así:

#div {

     border-right-width: 2px;

     border-right-style: solid;

     border-right-color: #666666;

}

Cuando la forma simplificada y también correcta, sería así,

#div {

     border:1px solid #666;

}

y así, respectivamente.

#div {

     border-right:2px solid #666;

}

Veis que fácil ha sido reducir tres lineas en una, pues imaginaos esto a lo largo de todo nuestro «style.css», las lineas que ahorraremos, y lo limpio que veremos el código cuando tengamos que buscar algo.

Sigue leyendo →

Una de mis debilidades es diseñar y maquetar con CSS, y ultimamente estoy viendo muchos themes de Worpress con el CSS muy desestructurado y con muchas lineas inútiles. Y cada vez más odio ver trozos de código como este:

#div {

     margin-top: 20px;

     margin-bottom: 5px;

     margin-right: 10px;

     margin-left: 25px;

     padding-top: 10px;

     padding-bottom: 0px;

     padding-right: 5px;

     padding-left: 5px;

}

8 lineas que pueden ir en dos, imaginaos esto en todo el style.css, se multiplica el numero de lineas del css por 4, una burrada, así que os voy a dar unas nociones de CSS muy sencillitas y que os serán de mucha utilidad. Voy a dividir este post en 4 o 5, ya que todo en uno se me antoja muy largo, hoy empezaremos con el margin y el padding.

Para empezar, las dos lineas en las que se puede simplifcar el CSS de arriba son:

#div {

     margin: 20px 10px 5px 25px;

     padding: 10px 5px 0px 5px;

}

Para simplificar de esta manera, sólo tenéis que tener en cuenta que tanto con el margin, como con el padding las medidas se ponen empezando por arriba y siguiendo el sentido horario, por lo que quedarán de esta forma: Arriba(top), Derecha(right), Abajo(bottom), Izquierda(left).

Si nos fijamos en el padding vemos que en el padding-bottom pone 0px, eso también podemos simplificarlo, y siempre que veamos 0px, podemos cambiarlo por 0 a secas.

#div {

     margin: 20px 10px 5px 25px;

     padding: 10px 5px 0 5px;

}

También vemos que el valor del padding-right y el padding-left son iguales, eso también se puede simplificar:

#div {

     margin: 20px 10px 5px 25px;

     padding: 10px 5px 0;

}

Más Simplificaciones en CSS:

Sigue leyendo →