Propiedades shorthand, resumiendo las propiedades CSS

Muchas veces, nuestra hoja de estilos CSS, queda de un tamaño inmenso al terminar nuestro sitio. Pero CSS nos permite acortarla, haciendo uso de las propiedades Shorthand.

Dentro de CSS 2.1, algunas propiedades permiten establecer simultáneamente varios valores diferentes. Se las denominan “propiedades shorthand”. Estas propiedades shorthand poseen la gran ventaja de permitir crear hojas de estilos mucho más cortas y rápidas de leer.

Es decir que las propiedades shorthand son basciamente son las propiedades CSS que le permiten establecer los valores de otras propiedades CSS simultáneamente. El uso de una propiedad resumida, un desarrollador web puede escribir hojas de estilo más legibles más concisas y, a menudo, ahorrando tiempo y energía.

La especificación CSS define propiedades abreviadas o shorthand properties al grupo la definición de propiedades comunes que actúan sobre el mismo tema.

Asi que vamos a ver como simplificar nuestro CSS con algunas de las principales propiedades.

Propiedades shorthand, ejemplos de uso

• Propiedad font
• Propiedad margin
• Propiedad padding
• Propiedad border
• Propiedad background
• list-style

Si se considera la siguiente hoja de estilos:

p {
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}
div {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 7px;
}
h1 {
  background-color: #FFFFFF;
  background-image: url("imagenes/icono.png");
  background-repeat: no-repeat;
  background-position: 10px 5px;
}

Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:

p {
  font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
}
div {
  margin: 5px 10px;
  padding: 3px 5px 10px 7px;
}
h1 {
  background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
}

Presiona clic en el siguiente enlace para mayor información sobre las Propiedades shorthand Ver mas información