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; }
Muchas gracias por los ejemplos!!! muy útiles…
Son detalles que al final ayudan a que el código sea mejor.