« Artículos « BlogTutorialesDownloads

Éste es el primero de una serie de artículos sobre optimización y trucos CSS que permiten escribir un código más limpio y en menos tiempo.

CSS posee bastantes atajos o “shorthands” para abreviar múltiples reglas en una sola. Aquí veremos los principales, y cómo usarlos correctamente para ahorrarnos tiempo, espacio y peso de los archivos.

Partamos por lo básico

Para sacarle provecho a este artículo, necesitamos conocimientos básicos de lo que es CSS, para qué sirve y cómo se usa (puedes empezar por aquí si no sabes nada).

Recordaremos, entonces, que la sintaxis CSS es, en líneas generales, como sigue:

selector {
      regla:valor;
}

El selector define qué clase, etiqueta, ID, etc., será modificado. La regla indica qué propiedad modificaremos del selector, y el valor lo modifica efectivamente.

El listado de propiedades CSS que se pueden modificar es larguísimo. Por ejemplo, un recuadro, en CSS, posee borde superior, borde derecho, borde inferior y borde izquierdo. A su vez, cada uno de estos bordes posee un ancho, un estilo (continuo, punteado, etc.), y un color. ¿Pero qué sucede si en realidad queremos que todos los bordes tengan los mismos valores? ¿Estamos condenados a escribir el valor para cada borde, uno por uno? Es aquí donde los shorthands o abreviaturas vienen al rescate.

Usar shorthands para abreviar reglas

Los shorthands tienen la utilidad de abreviar múltiples reglas CSS en una sola. Por ejemplo, y tomando el caso anterior, en lugar de declarar lo siguiente:

border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#ffffff;

podemos abreviarlo en esta regla:

border-bottom: solid 1px #ffffff;

De todas maneras, aún tendríamos estas cuatro reglas iguales:

border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;

… pero podemos abreviarlas aún más, en una sola:

border: 1px solid #ffffff;

¿Y qué sucede si quiero tres reglas iguales y una distinta?

Existe un truco para realizar una excepción en alguno de estos valores, manteniendo el resto igual. No sé si este truco está oficialmente documentado, pero hasta ahora yo lo he visto funcionar en todos los navegadores. Veamos un ejemplo:

Supongamos que queremos que todos los bordes sean de 1px de ancho, estilo solid y color #ffffff, excepto el ancho del borde inferior, que queremos dejarlo en 3px.

Aprovechando que CSS intenta no ser redundante, heredando las propiedades que no han sido definidas (por eso se llaman Hojas de Estilo en Cascada), podemos escribir el siguiente código ¡y funciona!:

border:1px solid #ffffff;
border-bottom-width:3px;

Listado de abreviaturas CSS

He aquí un listado de abreviaturas CSS, junto con las reglas que agrupan. Hay que tener en cuenta que no es necesario declarar todas las propiedades que agrupa cada shorthand; algunas pueden ser omitidas, y CSS usa los valores predeterminados para dichas propiedades.

Vamos con la lista:

background: background-color, background-attachment, background-repeat, background-image, background-position

font: font-family, font-size[/line-height], font-weight, font-style, font-variant, color

Ojo con font. Hay una serie de atributos (como font-weight, font-style o font-variant), que comparten nombres de atributos parecidos, como normal . El comportamiento de este shorthand es un poco impredecible. Yo recomiendo usarlo solamente cuando vayas a definir todas las propiedades, y no sólo unas cuantas.

border: border-top, border-top-style, border-top-color, border-top-width, border-right, border-right-style, border-right-color, border-right-width, border-bottom, border-bottom-style, border-bottom-color, border-bottom-width, border-left, border-left-style, border-left-color, border-left-width, border-width, border-style, border-color

padding: padding-top, padding-right, padding-bottom, padding-left

margin: margin-top, margin-right, margin-bottom, margin-left

list-style: list-style-type, list-style-image

Uso de shorthands para abreviar top, right, bottom y left

Las reglas border, margin y padding hacen referencia a cuatro lados de una caja: top, right, bottom y left (en ese orden). Existen cinco modos de abreviar estas cuatro instrucciones, dependiendo de los valores que necesitemos ajustar. Tomemos para esto, como ejemplo, a padding.

Abreviatura 1: Cuatro valores

padding:2px 3px 6px 0px

Al escribir los cuatro valores, CSS toma los valores en el orden que ya mencionamos: top (2px en este ejemplo), right (3px),  bottom (6px) y left (0px).

Abreviatura 2: Tres valores

padding: 5px 8px 12px

Al escribir tres valores, CSS considera el primer valor como top (5px), el segundo como left y right (8px para ambos), y el tercero como bottom (12px). Esta sintaxis es útil cuando queremos que el valor de bottom sea distinto al de los demás valores.

Abreviatura 3: Dos valores

padding: 3px 1px

Al escribir dos valores, CSS toma el primer valor como top y bottom (3px), y el segundo valor como left y right (1px).

Abreviatura 4: Un valor

padding: 5px

Al escribir sólo un valor, CSS aplica ese mismo valor a los cuatro lados: top, right, bottom y left.

¿Dudas? ¿Opiniones? ¿Fue este artículo de utilidad? Hazte parte en los comentarios.