Webmaster Libre

Cada día más y más documentos web parecen estar compuestos por nada más que una colección de elementos div. En la mayoría de los casos, un mejor uso de los selectores CSS podría haber evitado la innecesaria proliferación de elementos div

Os presento la traducción del documento Div Mania publicado por Juicy Studio

¿Qué es la “Div Manía”?

Los elementos div y span fueron introducidos en la especificación de HTML 4 para proveer un mecanismo genérico para agrupar y dar estructura a los documentos. El elemento div es un contenedor en bloque (block) y span es un contenedor en linea (inline).
Un elemento id y/o class suele asociarse con el div o span para utilizarlo como ancla para estilos css o scripting. La Div Mania surge cuando los desarrolladores han reemplazado los layouts creados con tablas por layouts CSS, pero han abusado de los elementos div hasta el punto de casi crear su propio lenguaje compuesto básicamente de elementos div anidados.
El elemento div es semánticamente neutro: no tiene ningún otro significado a parte de ser un contenedor. Debe usarse cuando no exista otro elemento que pueda actuar como contenedor, no como reemplazo de elementos con un significado reconocido y aceptado, como los encabezados, párrafos, listas, etc.
Un documento típico de la “Div Mania” es algo así:

<div id="wrapper">
    <div id="container">
        <div id="navigation">
           <div id="navhead">
            ...
            </div>
            <div id="navcontent">
            ...
            </div>
        </div>
        <div id="content">
           <div class="panel">
            ...
            </div>
            <div class="panel">
            ...
            </div>
        </div>
    </div>
</div>

Los desarrolladores que incurren en la trampa “Div Mania” generalmente están desprevenidos. Pasa un documento con Div Mania por un validador automático y, mientras el documento sea estructuralmente válido, se confirmará que es (x)HTML válido, ya que estos servicios son incapaces de determinar si se han utilizado las etiquetas más apropiadas o no.
Hay muchos factores que pueden contribuir a la Div Mania, incluyendo una falta de comprensión de los elementos de formato (atención a los elementos obsoletos), el modelo de cajas CSS, herencia y cascada y la elección de selectores adecuados.
Hablando con desarrolladores, que tienen un manejo razonable de CSS, para crear una página Div Mania, parece que el factor fundamental es un pobre entendimiento de los selectores. El resto del documento consistirá en una visión general de los selectores CSS.

Juego de Reglas

Un documento CSS está compuesto por una colección de reglas, donde una regla consiste en un selector acompañado de un bloque de declaraciones. Como lo más probable es que haya más de una regla, una colección de reglas se llama frecuentemente rule-set o juego de reglas. El selector determina a que elementos en el árbol del documento se aplicarán las reglas. Si el selector no es válido el agente de usuario ignorará todo el bloque de declaraciones. El bloque de declaración es una lista separada por punto y coma (”;”) de una o varias declaraciones (o ninguna), contenidas entre llaves (”{” y “}”). Cada declaración puede o estar vacia o estar compuesta por una pareja propiedad/valor, donde la propiedad y el valor se separan con dos puntos (”:”).
Consideremos la siguiente regla:

h1
{
   padding-top: 1em;
   border-bottom: 1px solid #ccc;
}

El selector es h1 y el bloque de declaración es todo lo comprendido entre las llaves y las llaves en si mismas. El bloque de declaración consiste en dos declaraciones separadas por punto y coma. Como el punto y coma sólo es requerido para separar declaraciones, el punto y coma final no es necesario, pero es legal. La primera declaración especifica una propiedad de padding-top con un valor de 1em
Lista de todas las propiedades de CSS 2.1

Especificidad de los Selectores

Entender como se aplican los selectores a los elementos requiere una comprensión básica de la herencia y la cascada. Herencia es cuando un elemento hereda propiedades de sus ancestros. Por ejemplo, el tamaño de fuente establecido en la navegación sería heredado por todos los elementos incluidos en la navegación, como parrafos y elementos de lista. No todas las características son heredadas por sus descendientes, aunque la mayoría lo son. En los casos en que las propiedades no sean heredadas, puede utilizarse el valor inherit para forzar la herencia.

*.warning
{
    color: inherit;
}

Cascada es cuando un elemento tiene múltiples reglas definidas y la Especificidad es usada para determinar que definiciones serán aplicadas. El orden es importante: cuando dos selectores tienen la misma especificidad, se aplica el último definido.

Selectores CSS

Los selectores son reglas conformes a unos patrones que determinan a que elementos del arbol del documento serán aplicadas las reglas de estilo. En el ejemplo anterior, el patrón del selector es el elemento h1. Pueden utilizarse patrones más complejos para ser más específico sobre que elementos van a ser los sujetos del selector, basados en la posición del elemento en el árbol del documento.

El Selector Universal

El selector universal se marca con un asterisco “*” y abarca a todos los elementos del documento. El siguiente ejemplo aplicaría un fondo amarillo pálido a todos los elementos que soportasen la propiedad background-color salvo que se usase un selector más específico. Para el resto de definiciones no mencionaré la especificidad de nuevo pero es importante recordar que las reglas de los próximos ejemplos sólo se aplicarán si no existe un selector más específico.

*
{
    background-color: #ffc;
}

El siguiente ejemplo podría ser aplicado a todos los elementos que tengan como nombre de clase attention

*.attention
{
    background-color: #ffc;
}

Cuando el asterisco forma parte de un patrón, como en el ejemplo anterior, puede ser omitido tranquilamente. Un patrón de .attention sería igual de efectivo que *.attention

Selector por Tipo

Los selectores por tipo afectan a todas las apariciones de un elemento en el documento. El siguiente ejemplo aplica un fondo amarillo pálido a todos los elementos p del documento.

p
{
    background-color: #ffc;
}

Agrupando Selectores

Cuando varios selectores van a compartir el bloque de declaraciones, los selectores pueden ser agrupados separándolos con una coma. El siguiente ejemplo aplicará un fondo amarillo pálido a todos los elementos strong y em

strong, em
{
    background-color: #ffc;
}

El selector CLASS

El selector class puede utilizarse como alternativa al selector attribute. El atributo class se indica con un punto . y se aplica a todos los elementos del documento con esa clase. El siguiente ejemplo aplicará un fondo amarillo pálido a todos los elementos li marcados por la clase attention

li.attention
{
    background-color: #ffc;
}

Si la clase va a ser aplicada a un número de elementos, estos pueden definirse de forma individual, agruparse o utilizarse el selector universal (*.classnameo .classname)

El selector ID

El atributo id debe ser único dentro del documento web, por tanto sólo puede aplicarse a una única aparición de un elemento dentro del árbol del documento. El selector CSS para indicar los id es la almohadilla #. El siguiente ejemplo aplicará un fondo amarillo pálido al encabezamiento de nivel 2 que tenga el id único offers

h2#offers
{
    background-color: #ffc;
}

Dado que el selector id debe ser único, es totalmente seguro utilizar el selector universal (*#idname o #idname). Para mejorar la legibilidad y la facilidad en el mantenimiento suele ser buena idea conservar el nombre del elemento en su lugar.

Selectores Descendentes

El árbol del documento está organizado de tal forma que cada elemento del árbol tenga un elemento padre, exceptuando el elemento raíz. Los selectores descendentes se usan para afectar a todos los elementos que descienden de un determinado padre. Los selectores descendentes se crean a partir de selectores separados por espacios, donde cada selector subsiguiente debe estar contenido en su predecesor. El siguiente ejemplo aplicará un fondo amarillo pálido a cualquier elemento strong contenido dentro de un párrafo, p.

p strong
{
    background-color: #ffc;
}

Selectores Hijo

Un selector hijo se usa para afectar a un hijo de determinado elemento. Los selectores hijo se designan utilizando >, con el padre a la derecha y el hijo a la izquierda. El siguiente ejemplo aplicará un fondo amarillo pálido a todos los elementos strong que sean hijos de p.

p>strong
{
    background-color: #ffc;
}

La diferencia entre el selector hijo y el selector descendente es que éste último afecta a todos los elementos strong contenidos en un párrafo, mientras que el selector hijo afecta únicamente a los elementos strong que sean hijos de p. Consideremos el siguiente ejemplo:

<p>
Jon said,
<q>
That'll be good when it's <strong>finished</strong>.
</q>
If only he <strong>knew</strong>!
</p>

El selector descendente afectaría a los dos elementos strong, mientras que el selector hijo sólo afectaría al último dado que el primer elemento strong no es hijo de p si no de q

Desafortunadamente el Internet Explorer 6 no soporta los selectores hijo.

Selectores Hermanos Adyacentes

Los elementos hermanos son aquellos que comparten el mismo padre. Los hermanos adyacentes son aquellos que se encuentran uno junto al otro y comparten el mismo padre. Los selectores hermanos adyacentes se marcan con un signo más +. El siguiente ejemplo aplicaría un fondo amarillo pálido a todos los elementos h2 que sigan inmediatamente a un elemento h1 con el que compartan padre.

h1+h2
{
    background-color: #ffc;
}

Desafortunadamente el Internet Explorer 6 no soporta los Selectores Hermanos Adyacentes.

Selectores Atributo

Los selectores atributo afectan a los elementos que tengan definido un atributo en el árbol del documento.

[att]

El selector atributo básico afecta a todos los elementos que tengan establecido un atributo, independientemente del valor del mismo. El siguiente ejemplo aplicaría un fondo amarillo pálido a todos los elementos de ancla a los que se haya asignado un atributo title

a[title]
{
    background-color: #ffc;
}

[att=val]

Este selector se usa para afectar a los elementos que contengan un atributo con un valor específico. El siguiente ejemplo aplicará un fondo amarillo pálido a todos los elementos de ancla que contengan el atributo rel con un valor de external.

a[rel=external]
{
    background-color: #ffc;
}

[att~=val]

Algunos atributos permiten que se aplique una lista separada por espacios de valores. Poniendo una tilde ~ antes del signo igual permite que se aplique el bloque de declaraciones al elemento con el atributo donde uno de los valores dados sea exactamente el mismo. El siguiente ejemplo aplicaría un fondo amarillo pálido a todos los párrafos con la clase .attention

p[class~=attention]
{
    background-color: #ffc;
}

p[class~=attention] es el equivalente a p.attention

[att|=val]

Este selector se utiliza para seleccionar atributos cuyo valor contenga una lista separada por guiones. Este selector estaba pensado, en principio, para ser utilizado con códigos de lenguaje. El siguiente ejemplo afectaría a los elementos de ancla con un atributo hreflang que empieza por “en”, incluyendo en, en-US, en-GB, en-cockney, o cualquier otra combinación con “en”.

a[hreflang|=en]
{
    background-color: #ffc;
}

Pueden especificarse varios selectores atributo a la vez. El siguiente ejemplo utiliza dos selectores atributo que aplicarán un fondo amarillo pálido a todas las anclas que contengan un atributo tittle y un atributo rel con valor external

a[title][rel~=external]
{
    background-color: #ffc;
}

CSS 3 tiene algunos selectores atributo realmente interesantes, incluyendo un selector para buscar una coincidencia al principio del valor del atributo E[foo^="bar"], un selector para buscar una coincidencia al final del valor del atributo E[foo$="bar"] y un selector para buscar una cadena E[foo*="bar"]. Mozilla/Firefox y Opera soportan los selectores atributo. Mozilla/Firefox también soporta los propios de CSS 3. Ni que decir tiene que Internet Explorer 6 no soporta ningun tipo de selectores atributo.

Pseudo Selectores

Los pseudo selectores se utilizan en escenarios donde la posición del elemento dentro del árbol del documento no sea suficiente como selector, como en la primera línea de un párrafo.
Los pseudo elementos y las pseudo clases son utilizados para aplicar formato basado en información fuera del árbol del documento y están precedidos de “dos puntos” :

CSS 2.1 tiene cuatro pseudo elementos; :first-line, :first-letter, :before,y :after. El siguiente ejemplo aplica un font-size de 2em a la primera letra de un párrafo.

p:first-letter
{
    font-size: 2em;
}

CSS 2 tiene una pseudo clase :first-child, 2 pseudo clases para enlaces (:link y :visited), 3 pseudo clases dinámicas (:active, :hover y :focus y una pseudo clase para lenguaje (:lang). El siguiente ejemplo aplicaría un fondo amarillo pálido a todos los elementos de ancla que sean el primer hijo de cualquier elemento

a:first-child
{
    color: #090;
}

El siguiente ejemplo da color verde a todos los vínculos visitados

a:visited
{
    color: #090;
}

El siguiente ejemplo aplicaría un fondo amarillo pálido a los párrafos con un atributo lang de Francés

p:lang(fr)
{
    background-color: #ffc;
}

Conclusión

Un conocimiento pobre de los selectores no es la unica causa de la “Div Manía”, pero sí una de las más importantes. El elemento div es útil para agrupar y posicionar contenido, pero el CSS puede ser aplicado directamente a las listas y otros elementos más adecuados que tengan un significado aceptado.

“Traducido con el permiso de Juicy Studio“