Utilizar Hojas de Estilo (CSS) para el diseño y desarrollo de un sitio web nos trae grandes ventajas, primariamente, el

poder separar el contenido del sitio con respecto de su apariencia (diseño), lo cual nos da un control prácticamente total eindividual de ambos aspectos del sitio. Otra ventaja es la reducción de peso en los

archivos, porque una hoja de estilo controla los estilos de todo el sitio. Sin embargo existen maneras de optimizar el archivo CSS utilizando abreviaciones o “Shorthands” en las declaraciones y propiedades

de cada estilo.

A continuación unas cuantas recomendaciones:

Font

Usar:

font: 1em/1.5em bold italic serif

…en vez

de:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Esta propiedad sólo funcionará si se declara font-size y font-family, sino esta regla será completamente

ignorada.

Background

Usar:

background: #fff url(image.gif) no-repeat top left

…en vez de:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Si se omite cualquier

comando de la propiedad del background el navegador aplicará los valores por defecto.

Lists

Usar:

list-style: disc outside url(image.gif)

…en vez de

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url

(image.gif)

Margin & padding

Hay algunas abreviaturas para los comandos de margin y padding, dependiendo

de cuántos lados del elemento contenedor tengan los mismos valores de margin y padding.

Cuatro valores diferentes

Usar:

margin: 2px 1px 3px 4px (top,

right, bottom, left)

…en vez de:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Tres valores diferentes

Usar:

margin: 5em 1em 3em (top, right and left, bottom)

…en vez

de:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Dos valores

diferentes

Usar:

margin: 5% 1% (top and bottom, right and left)

…en vez de:

margin-top: 5%;

margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

Un valor diferente

Usar:

margin: 0 (top,

bottom, right and left)

…en vez de:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Border

Usar:

border: 1px black solid

…en vez de:

border-width: 1px;

border-color: black;
border-style: solid

Usar:

border-right: 1px black solid

…en vez de:

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

Artículo original de: Trenton Moss