13.7. Recomendaciones generales sobre CSS (Introducción a CSS)

13.7.1. Atributos ID y class

El atributo id se emplea para identificar a cada elemento HTML, por lo que los identificadores deben ser únicos en una misma página. En otras palabras, dos elementos HTML diferentes de una misma página no pueden tener un mismo valor en el atributo id.

Por otra parte, el atributo class se emplea para indicar la clase o clases a las que pertenece el elemento. Una misma clase se puede aplicar a varios elementos diferentes y un único elemento puede tener asignadas varias clases (se indican separadas por espacios en blanco).

Aunque los dos atributos tienen muchos otros propósitos (sobre todo el atributo id), CSS los emplea principalmente con los selectores para indicar los elementos sobre los que se aplican los diferentes estilos.

En el siguiente ejemplo, las dos listas están formadas por un mismo elemento HTML <ul>, pero sus atributos id las distinguen de forma adecuada:

<ul id="menu">
  ...
</ul>

<ul id="enlaces">
  ...
</ul>

Una de las principales recomendaciones del diseño de páginas XHTML y hojas de estilos CSS está relacionada con los valores asignados a los atributos id y class. Siempre que sea posible, estos atributos se deben utilizar para mejorar la semántica del documento, es decir, para añadir significado a cada elemento de la página.

Por este motivo, se recomienda que los valores asignados a id y class indiquen la función del elemento y no estén relacionados con su aspecto o su posición:

Valores no recomendados	Valores recomendados
negrita	importante
arial15	titular
verdanaPequena	normal
menuIzquierdo	menuSecundario
letraRoja	error

Elegir el valor adecuado para los atributos id o class es sencillo: si el aspecto de un elemento cambia, el valor de id o class debe seguir siendo adecuado. Por tanto, evita utilizar valores relacionados con su posición (izquierdo, derecho, primero, segundo, superior, etc.), color (textoRojo, subrayadoGrisClaro, etc.) o tipo de letra (verdana10, arial15px, etc.)

Técnicamente, los valores de los atributos id y class deben cumplir las siguientes restricciones:

Sólo pueden empezar por un guión medio (-), un guión bajo (_) o una letra.
El resto de caracteres, pueden ser números, guiones medios (-), guiones bajos (_) y letras.
Los navegadores distinguen entre mayúsculas y minúsculas.
Aunque es posible utilizar letras como ñ y acentos, no se recomienda hacerlo porque no es seguro que funcione correctamente en todas las versiones de todos los navegadores.

13.7.2. CLASSitis y DIVitis

Un error común al comenzar a desarrollar páginas con estilos CSS es la utilización excesiva de etiquetas <div> y atributos class.

Ejemplo de divitis y classitis:

<div id="menu">
<ul class="menu">
  <li class="elemento_menu"><span class="texto_elemento_menu">...</span></li>
  <li class="elemento_menu"><span class="texto_elemento_menu">...</span></li>
  <li class="elemento_menu"><span class="texto_elemento_menu">...</span></li>
  <li class="elemento_menu"><span class="texto_elemento_menu">...</span></li>
</ul>
</div>

Los selectores de CSS permiten prescindir de la mayoría de etiquetas <div> y atributos id y class. Diseñar páginas con exceso de etiquetas <div> no mejora la semántica del documento y sólo consigue complicar el código HTML.

13.7.3. Estructuración del código CSS

La posibilidad de incluir todo el código CSS en archivos externos exclusivamente dedicados a contener las reglas CSS, permite ordenar de forma lógica las reglas, mejorando su legibilidad y facilitando su actualización.

Las reglas CSS de las hojas de estilos complejas se suelen agrupar según su funcionalidad y se suelen incluir en el siguiente orden:

Estilos básicos (<body>, tipo de letra por defecto, márgenes de <ul>, <ol> y <li>, 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.)
Enlaces (estilos normales, estilos :hover, etc.)
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.)

Otra característica común de los mejores sitios web es el uso de comentarios CSS para mejorar la estructura de las hojas de estilos muy largas.

Ejemplo de código CSS estructurado de http://veerle.duoh.com/

/* Veerle's blog Main stylesheet
------------------------------------------------------------------*/

/* Wide browser windows
------------------------------------------------------------------*/
#wrap {
  width:995px;
}


/* Global
------------------------------------------------------------------*/
html, body, form, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl {
  margin:0;
  padding:0;
}
ul,li {
  list-style-type:none;
}
...

/* Wide layout
------------------------------------------------------------------*/
.wide #wrap-main {
  ...
}
...

/* Links
------------------------------------------------------------------*/
a:link,
a:visited {
  text-decoration:none;
  color:#e45a49;
}

/* Header
------------------------------------------------------------------*/
#header {
  ...
}
...

/* Main navigation
------------------------------------------------------------------*/
ul#nav {
  ...
}
...

Ejemplo de código CSS estructurado de http://www.uxmag.com/

/*	-------------------------------------------------------------
	UX Magazine
	Design | Technology | Strategy | Common Sense
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Description:	Base setup styles
	Filename:		uxm.base.css
	Version:		1.9
	Date:			Feb 9, 2006
	-------------------------------------------------------------	*/

/*	-------------------------------------------------------------
	Base Body Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

/*	-------------------------------------------------------------
	Print Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

/*	-------------------------------------------------------------
	Top Bar Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

/*	Slogan
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
/*	Search Form
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
/*	Channels
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

13.7.4. División de los estilos en varios archivos CSS

Normalmente, los estilos de una página compleja se dividen en varios archivos CSS diferentes para hacerlos más manejables. En primer lugar, se suele utilizar un archivo común que contiene todos los estilos básicos de las páginas HTML del sitio web.

Además, si existe alguna sección especial del sitio web que requiera nuevos estilos, se crea un archivo CSS con todos esos estilos. También es habitual preparar una hoja de estilos específica para impresora y otra preparada para los dispositivos móviles.

Una vez creados los archivos CSS, existen dos estrategias para enlazar varios archivos CSS en las páginas HTML:

Si se puede modificar fácilmente la cabecera del documento (por ejemplo porque las páginas se generan dinámicamente) lo habitual es incluir tantos elementos <link> como archivos CSS se enlazan:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="/css/basico.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="/css/seccion.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
  <link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />
  ...
</head>

Si no se puede modificar de forma sencilla la cabecera de los documentos para añadir, eliminar y modificar los archivos CSS que se enlazan, lo habitual es enlazar un único archivo CSS que se encarga de importar todos los demás:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="all" />
  ...
</head>

El contenido del archivo estilos.css debería ser el siguiente para ser equivalente al ejemplo anterior:

@import url("basico.css") screen;
@import url("seccion.css") screen;
@import url("impresora.css") print;
@import url("movil.css") handheld;