Extracto de CSS Mastery: Advanced Web Standards Solutions [traducción]

Identificadores y nombres de clase

Los elementos de marcado significativos proporcionan una excelente base para estructurar un documento, pero la lista de elementos disponible no es exhaustiva. El (X)HTML fue creado como un lenguage simple de marcado de documentos, no como un lenguaje de interfaz. Por ello, los elementos destinados para marcar secciones como áreas de contenido o barras de navegación simplemente no existen. Se podrían crear elementos propios empleando XML, pero por razones demasiado complicadas para profundizar en ellas no sería algo muy práctico en este momento.

La siguiente mejor opción es elegir elementos ya existentes y darles un significado extra por medio de un identificador o un nombre de clase. Esto añade estructura adicional al documento, y proporciona selectores útiles para aplicar estilos. De esta forma, se puede coger una simple lista de vínculos y, aplicándole un identificador como navegacionPrincipal, crear un elemento de navegación personalizado.


<ul id="navegacionPrincipal">
    <li><a href="#"Página inicial</li>
    <li><a href="#"Sobre nosotros</li>
    <li><a href="#"Contacto</li>
</ul>

Un identificador se emplea para individualizar un elemento de una página, como por ejemplo la navegación del sitio, y debe ser único. Los identificadores son útiles para marcar elementos estructurales persistentes como la navegación principal o el área de contenido. También son útiles para identificar elementos específicos (un vínculo particular dentro de un elemento, por ejemplo).

A lo largo de un sitio, los identificadores deberían aplicarse a elementos conceptualmente similares con el fin de evitar la confusión. Técnicamente, se puede dar a un formulario de contacto y a los detalles de contacto el identificador de contacto, asumiendo que ambos se encuentren en páginas diferentes. Pero podría ser que se necesitase aplicar un estilo diferente a cada elemento en función del contexto, lo que en tal circunstancia sería problemático. En lugar de eso, sería más simple emplear distintos identificadores como formularioContacto y detallesContacto.

Mientras que un identificador sólo se puede aplicar a un elemento de una página, la clase se puede aplicar a cualquier número de elementos en la misma. Las clases son muy útiles para identificar tipos de contenido u objetos similares. Por ejemplo, se podría tener una página de noticias que contuviese la fecha de cada uno de los artículos. Mejor que dar a cada fecha un identificador por separado, se puede aplicar a todas ellas la clase fecha. Al nombrar los identificadores y las clases, es importante mantener los nombres lo más significativos y «no presentacionales» [un-presentational] posibles. Por ejemplo, se podría dar a una sección de la navegación el identificador navegacionManoDerecha, que es donde se pretende que aparezca. Sin embargo, si posteriormente se elige posicionarla a la izquierda, la CSS y el (X)HTML quedarían desincronizados. En lugar de eso, tendría más sentido llamar al elemento subNavegacion o navegacionSecundaria. Estos nombres explican lo que el elemento es, y no cómo se presenta. Lo mismo es válido para los nombres de clase. Supongamos que queremos que los mensajes de error aparezcan en rojo. Mejor que utilizar una clase con el nombre rojo es elegir alguno más significativo, como error o aviso (ver tabla 1.3).

Tabla 1.3: Nombres correctos e incorrectos para identificadores y/o clases.
Nombres incorrectos	Nombres correctos
`rojo`	`error`
`columnaIzquierda`	`contenidoSecundario`
`navegacionSuperior`	`navegacionPrincipal`
`primerParrafo`	`introduccion`

Al asignar nombres para identificadores y clases hay que prestar atención al caso. En general, CSS es un lenguaje no sensible al caso. Sin embargo, la sensibilidad al caso de los elementos que aparecen en el marcado, como identificadores y nombres de clases, depende del lenguaje de marcado. Si se emplea XHTML, las clases y los identificadores son sensibles al caso, mientras que con HTML no lo son. La mejor forma de controlar esta situación es ser consistente con las convenciones de nombrado empleadas. Así, si se emplea la sintaxis de camelCase para las clases en el (X)HTML, se debe aplicar también en la CSS.

Gracias a su flexibilidad, las clases pueden ser muy poderosas. Por ello suele abusarse de ellas. Los autores novatos de CSS suelen añadir clases a prácticamente cada elemento en un intento por conseguir un control al detalle sobre sus estilos. Los primeros editores WYSIWYG también tenían tendencia a añadir clases cada vez que se aplicaba un estilo. Muchos desarrolladores adquirieron este mal hábito al emplear código generado como fuente para aprender CSS. Esta afección se denomina «clasitis» [classitis], y es, en algunos aspectos, tan mala como emplear tablas de diseño, porque añade código sin significado al documento.


<h3 class="encabezadoNoticia">Zeldman.com saca un 10</h3>
<p class="texto noticia">
    Otro hito para Jeffrey ahora que zeldman.com saca un 10
</p>
<p class="textoNoticia"><a href="noticias.php">Leer más</a></p>

En el ejemplo anterior, cada elemento se identifica como parte de una noticia utilizando una clase relacionada con la misma. El motivo es permitir que el encabezado y el texto tengan un estilo diferente al del resto de la página. Sin embargo, no se necesitan esas clases extra para seleccionar cada elemento individual. En su lugar, basta con identificar el bloque como una noticia englobando las partes en una división a la que se aplique la clase noticia. Después se puede seleccionar el encabezado o el texto simplemente usando la cascada.


<div class="noticia">
    <h3>Zeldman.com saca un 10</h3>
    <p>Otro hito para Jeffrey ahora que zeldman.com saca un 10</p>
    <p><a href="noticias.php">Leer más</a></p>
</div>

Eliminar clases innecesarias de esta forma ayuda a simplificar el código y a reducir el peso de la página. Presentaré los selectores de CSS y la manera de aplicar los estilos en breve. Sin embargo, esta dependencia de las clases es la mayor parte de las veces innecesaria. Por lo general, yo sólo aplico una clase a un elemento si no es posible aplicarle un identificador, y normalmente intento emplearlas lo menos posible. La mayor parte de los documentos que creo sólo necesitan de la adición de un par de clases. Si uno se encuentra aplicando un montón de clases, probablemente eso sea significativo de que el documento (X)HTML está pobremente estructurado.

Divs y spans

Un elemento útil para añadir estructura a un documento es el elemento div. Muchos consideran erróneamente que el elemento div no tiene un valor semántico asociado. Sin embargo, div es una abreviatura de division, y proporciona un medio para dividir un documento en áreas de significado. Así, englobando el área de contenido principal en un div y asignándole un identificador como contenidoPrincipal, se está añadiendo estructura y significado al documento.

Para mantener el marcado innecesario al mínimo, sólo se debería utilizar un elemento div si no existe un elemento específico para la función indicada. Por ejemplo, si se está utilizando una lista para la navegación principal, no hay necesidad de incluir ésta en un div.


<div id="navegacionPrincipal">
    <ul>
        <li><a href="#"Página inicial</li>
        <li><a href="#"Sobre nosotros</li>
        <li><a href="#"Contacto</li>
    </ul>            
</div>

Se puede eliminar el div y en su lugar aplicar a la lista el identificador sin más:


<ul id="navegacionPrincipal">
    <li><a href="#"Página inicial</li>
    <li><a href="#"Sobre nosotros</li>
    <li><a href="#"Contacto</li>
</ul>

El empleo de demasiados div se designa generalmente como «divitis» [divitus], y por lo general es síntoma de que el código está pobremente estructurado y que es excesivamente complicado. Algunos de los que son nuevos en CSS intentan replicar su vieja estructura de tablas por medio de un conjunto de div. Pero esta práctica no es más que sustituir un conjunto de etiquetas sin significado por otro. En su lugar, los elementos div deberían utilizarse para agrupar elementos relacionados por su significado o su función, y no por su presentación o disposición.

De la misma forma que div puede emplearse para agrupar elementos de bloque, span se emplea para identificar grupos de elementos en línea:


<h2>¿Dónde está Durstan?</h2>
<p>Publicado el <span class="fecha">22 de mrzo, 2005</span> por <span class="autor">Andy Budd</span></p>

Por lo general es menos común tener que agrupar o identificar elementos en línea, por lo que es menos frecuente ver elementos span que elementos div. Donde sí se pueden encontrar los span es en marcados preparados para técnicas de reemplazo por imágenes, en las que se emplean como anclas extra para aplicar estilos adicionales.

A pesar de que el objetivo es mantener el código tan limpio y semántico como sea posible, a veces es inevitable añadir un div o un span no semántico para presentar la página como se desea. En este caso, tampoco hay que inquietarse demasiado. Estamos inmersos en un período de transición y esperamos que CSS 3 nos permita un control mayor de nuestra presentación. Mientras, hay ocasiones en que las necesidades del mundo real se imponen sobre la teoría. Lo importante es saber si es necesaria una solución de compromiso y si ésta se está adoptando por los motivos correctos.