Pautas para optimizar las hojas de estilo CSS

Los tiempos de carga de una web constituyen un factor fundamental dentro del posicionamiento SEO y, en gran medida, son el resultado de un código bien escrito. En esto último contribuye una adecuada gestión de las hojas de estilo, que siempre deben ir en un fichero externo para que la caché pueda hacer su trabajo. Si colocamos el CSS en línea, será descargado cada vez que algún usuario acceda a la correspondiente página. Por otra parte, hay que procurar racionalizar el número de clases, aprovechando las existentes en la medida de lo posible, mientras que los comentarios insertados deben ser concisos. Otra buena práctica está en agrupar las hojas en el mínimo número de archivos. Con respecto a la escritura del código, a continuación os ofrezco varias muestras para acortar al máximo, de tal modo que el fichero tenga el menor peso posible.

Uso de CSS ShortHands

Su uso nos ahorra muchas líneas de código en nuestras hojas de estilo.

Font
.clase {
font-family: Times;
font-size: 12px;
line-height: 16px;
font-style: italic;
font-weight: bold; }

.clase { font: Times 12px/16px italic bold; }

// En el caso de que no se declare alguno de los valores, éste tomará el establecido por defecto:
.clase { font: -depende del navegador- medium normal normal normal; }

 
Border
.clase {
border-width: 2px;
border-style: solid;
border-color: #a2a2a2; }

.clase { border: 2px solid #a2a2a2; }

 
Margin
.clase {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 7px;
margin-left: 12px; }

.clase { margin: 10px 15px 7px 12px; } // El orden sigue la dirección de las agujas del reloj (top, right, bottom, left)

margin: 10px; // Mismo valor para los cuatro lados
margin: 10px 15px; // Top y bottom: 10px - Left y right: 15px
margin: 10px 15px 20px; // Top: 10px - Left y right: 15px - Bottom: 20px

 
Padding
.clase {
padding-top: 8px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 7px; }

.clase { padding: 8px 12px 10px 7px; } // Según las agujas del reloj

padding: 15px; // Mismo valor para los cuatro lados
padding: 15px 20px; // Top y bottom: 15px - Left y right: 20px
padding: 15px 20px 25px; // Top: 15px - Left y right: 20px - Bottom: 25px

 
Background
.clase {
background-image: url('nombre-imagen.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 15px;
background-color: #d5d5d5; }

.clase { background: url('nombre-imagen.jpg') no-repeat fixed 0 15px #d5d5d5; }

// Al igual que en font, si algún valor no se declara, coge otros por defecto:
.clase { background: none repeat scroll top left transparent; }

 
List
.clase {
list-style-image: url('nombre-imagen.jpg');
list-style-type: square;
list-style-position: outside; }

.clase { list-style: url('nombre-imagen.jpg') square outside; }

Agrupación de selectores con las mismas propiedades

Es otra manera muy práctica de acortar el CSS.

h2 { color: #171717; margin: 5px; font-weight: 700; }
h3 { color: #171717; margin: 5px; font-weight: 700; }

h2, h3 { color: #171717; margin: 5px; font-weight: 700; }

Eliminación de ceros y unidades de medida

Cuando no son precisos para la correcta interpretación del código por parte de los navegadores, es conveniente eliminarlos. Os dejo un ejemplo:

.clase {
margin: 10.0em;
padding: 0.4em;
border: 0px; }

.clase {
margin: 10em;
padding: .4em;
border: 0; }