Las hojas de estilos reales de los sitios web profesionales suelen contener cientos de reglas y ocupan miles de líneas. Por este motivo, es imprescindible seguir unas buenas prácticas al crear las hojas de estilos para mejorar la producitivdad y reducir los posibles errores. A continuación se muestran algunas de las recomendaciones más útiles para crear hojas de estilos profesionales.
2.5.1. Llaves
Uno de los elementos básicos que los diseñadores web deben acordar es el tipo de llaves que se utilizan para encerrar la declaración de cada regla CSS. Aunque se utilizan muchos modelos diferentes, a continuación se muestran los más populares.
Llave de apertura en la misma línea del selector y llave de cierre en una nueva línea para separar unas reglas de otras:
selector {
propiedad1: valor1;
propiedad2: valor2;
}Una variante del modelo anterior consiste en mostrar cada llave en su propia línea, para separar aún más el selector de su declaración. Este modelo lo utilizan normalmente los programadores web:
selector
{
propiedad1: valor1;
propiedad2: valor2;
}Por último, existe un modelo compacto que no crea nuevas líneas para las llaves. Aunque es mucho más compacto, normalmente es más difícil de leer:
selector {
propiedad1: valor1;
propiedad2: valor2; }2.5.2. Tabulaciones
Tabular el código facilita significativamente su lectura, por lo que tabular las propiedades CSS es una de las mejores prácticas de los diseñadores web profesionales. Como conocen la mayoría de programadores, no es recomendable insertar tabuladores en el código, sino que se deben emplear 2 o 4 espacios en blanco.
/* Propiedades sin tabular */
selector {
propiedad1: valor1;
propiedad2: valor2;
}
/* Propiedades tabuladas con 2 espacios */
selector {
propiedad1: valor1;
propiedad2: valor2;
}Extendiendo la práctica de tabular las propiedades, algunos diseñadores recomiendan tabular también las reglas CSS relacionadas. El siguiente ejemplo muestra tres reglas CSS relacionadas entre sí:
ul {
margin: 1em 0;
padding: 0;
}
ul li {
list-style-type: square;
}
ul li ul {
font-style: italic;
list-style-type: disc;
}La recomendación consiste en tabular las reglas CSS que están relacionadas porque sus selectores están anidados. Por tanto, la regla cuyo selector es ul li debería estar tabulada respecto de la regla ul y de la misma forma la regla cuyo selector es ul li ul debería estar tabulada respecto de ul li:
ul {
margin: 1em 0;
padding: 0;
}
ul li {
list-style-type: square;
}
ul li ul {
font-style: italic;
list-style-type: disc;
}2.5.3. Propiedades
Cuando se establece la misma propiedad en varios selectores diferentes pero relacionados, se recomienda escribir las reglas CSS en una única línea, para facilitar su lectura:
#contenedor #principal h1 { font-size: 2em; }
#contenedor #principal h2 { font-size: 1.8em; }
#contenedor #principal h3 { font-size: 1.6em; }Cuando en el caso anterior las propiedades y/o selectores no ocupan el mismo sitio, se pueden utilizar espacios en blanco para crear una estructura similar a las columnas de una tabla:
h1 { color: #000; text-align: center; }
#principal h2 { color: #C0C0C0; font-size: 1.8em; }
#lateral blockquote { font-size: 0.9em; text-align: justify; }Respecto al orden en el que se indican las propiedades en la declaración, algunos diseñadores recomiendan agruparlas por su funcionalidad:
selector {
position: absolute; /* propiedades de posicionamiento */
right: 0;
bottom: 10px;
width: 300px; /* propiedades de tamaño */
height: 250px;
color: #000; /* propiedades tipográficas */
font-size: 2em;
}Otros diseñadores recomiendan ordenar alfabéticamente las propipedades para facilitar su búsqueda y evitar duplicidades:
selector {
bottom: 10px;
color: #000;
font-size: 2em;
height: 250px;
position: absolute;
right: 0;
width: 300px;
}2.5.4. Selectores
Los selectores deben ser descriptivos para facilitar la lectura de la hoja de estilos, por lo que hay que poner especial cuidado en elegir el nombre de los atributos id y class. Además, aunque aumenta el tamaño total de la hoja de estilos, se recomienda utilizar selectores lo más específicos posible para facilitar el mantenimiento de la hoja de estilos:
p.especial { ... } /* poco específico */
#contenedor #principal p.especial { ... } /* muy específico */Por otra parte, cuando una regla CSS tiene varios selectores largos, es mejor colocar cada selector en su propia línea:
#contenedor h1,
#contenedor #principal h2,
#contenedor #lateral blockquote {
color: #000;
font-family: arial, sans-serif;
}2.5.5. Organización
Cuando una hoja de estilos tiene cientos de reglas, es recomendable organizarla en secciones para facilitar su mantenimiento. Aunque existen muchas posibles organizaciones, en general se utilizan las siguientes secciones:
- Estilos básicos (estilos de
<body>, tipo de letra por defecto, márgenes de<ul>,<ol>y<li>, estilos de los enlaces, etc.) - Estilos de la estructura o layout (anchura, altura y posición de la cabecera, pie de página, zonas de contenidos, menús de navegación, etc.)
- Estilos del menú de navegación
- Estilos de cada una de las zonas (elementos de la cabecera, titulares y texto de la zona de contenidos, enlaces, listas e imágenes de las zonas laterales, etc.)
Si la hoja de estilos tiene muchas secciones, algunos diseñadores incluyen un índice o tabla de contenidos al principio del todo. En la hoja de estilos del sitio web mozilla.org utilizan la siguiente tabla de contenidos:
/* TOC:
Random HTML Styles
Forms
General Structure
Navigation
Quotations
Comments and Other Asides
Emphasis
Computers - General
Code
Examples and Figures
Q and A (FAQ)
Tables
Headers
Meta
Specific to Products Pages
*/Otra recomendación relacionada con la organización de las hojas de estilos es la de utilizar siempre los mismos nombres para los mismos elementos. Si observas las hojas de estilos de los diseñadores profesionales, verás que siempre llaman #cabecera o #header o #hd a la cabecera de la página, #contenidos o #principal a la zona principal de contenidos y así sucesivamente.
Algunos de los atributos id más utilizados en los diseños web son: cabecera, cuerpo, pie, contenidos, principal, secundario, lateral, buscador, contacto, logo.
2.5.6. Comentarios
Separar las secciones de la hoja de estilos y otros bloques importantes es mucho más fácil cuando se incluyen comentarios. Por este motivo se han definido decenas de tipos diferentes de comentarios separadores.
El modelo básico sólo añade un comentario destacado para el inicio de cada sección importante:
/* ---------------------------------------*/
/* ---------->>> CONTENEDOR <<<-----------*/
/* ---------------------------------------*/Otros diseñadores emplean diferentes comentarios para indicar el comienzo de las secciones y el de las partes importantes dentro de una sección:
/* -------------------------------------------------------------
CABECERA
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Logotipo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Buscador
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */Combinando los comentarios y la tabulación de reglas, la estructura de la hoja de estilos está completamente ordenada:
/* -------------------------------------------------------------
CABECERA
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#cabecera {
...
}
/* Logotipo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#cabecera #logo {
...
}
/* Buscador
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#cabecera #buscador {
...
}