CSS básico: Cascada, especificidad y herencia 8.1.15

CSS básico: Cascada, especificidad y herencia

La cascada, especificidad y herencia en Css son tres conceptos básicos. Mira si será importante, que hasta en el nombre lo lleva: CSS = "Cascading style sheet" = "Hoja de estilos en Cascada". Su comprensión evitará muchos quebraderos de cabeza y ahorro de tiempo.

A continuación una breve explicación de estos conceptos claves, tomando como base la Especificación del consorcio W3c y su Wiki.

Es conveniente que conozcas la terminología utilizada en Css. Para una mejor comprensión de este artículo (qué son las reglas, las declaraciones, porpiedades y valores) te recomiendo leas antes el artículo sobre Terminología y Glosario Css.

Qué es la Cascada en Css

La cascada en Css es el mecanismo que controla el resultado final cuando, por existir declaraciones múltiples, surgen conflictivos sobre qué estilos se aplican a un elemento. Dicho de otra manera: si hay dos o más declaraciones que afectan a un elemento, la cascada determina cuál de ellas tiene preferencia, mayor peso, y se aplicará.

La forma de calcular esta preferencia no se realiza de forma arbitraria, sino que tiene su proceso y reglas en base a los tres conceptos principales que controlan la prioridad en que las declaraciones CSS se deben aplican:

1. La importancia de la regla.
2. El origen o procedencia.
3. El orden de aparición en el código.

Cuando el navegador recibe una página actúa de la siguiente manera para calcular qué aplicar:

1. Selecciona los estilos a aplicar por el tipo de medio.
2. Aplica los que corresponde por su importancia y origen.
3. Si las declaraciones tienen la misma importancia y origen, prima la especificidad del selector.
4. Si se mantiene el empate por importancia, origen y especificidad manda el orden de aparición en el Css. La última declarada gana.

Tipo de Medios en Css

CSS permite definir diferentes estilos según cuál sea el dispositivo en que se va a mostrar la información: pantallas, impresoras, móviles, proyectores, etc.
Este valor se declara en el método que se emplee para incluir los estilos, ya sea mediante enlace <link rel="stylesheet" media="screen" .../> o cualquier otro, por ejemplo: @import 'estilos.css';.
También están incluidas en el tipo de medio las declaraciones llamadas mediante las propiedades @media Queries.

Importancia y origen de las reglas Css

Este punto ha sido modificado y ampliado por los últimos documentos del W3c. Tienes las novedades en este artículo.

El peso de una declaración CSS depende de dónde venga y su grado de importancia. En caso de haber declaraciones contradictorias se aplicarán en el siguiente orden, de menor a mayor peso (los posteriores anula las precedentes, esto es, la 5ª prevalece sobre la 1ª):

1. Declaraciones del agente de usuario (navegador).
2. Declaraciones normales en los estilos del usuario.
3. Declaraciones normales en los estilos del autor.
4. Declaraciones con !important del autor.
5. Declaraciones con !important del usuario

Especificidad del selector

La especificidad es un método de resolución de conflictos dentro de la cascada.

La especificidad se calcula de una manera muy particular, basado en los valores de 4 categorías distintas. Con fines explicativos la especificación CSS2 representa estas categorías con las letras a, b, c, y d. Cada una tiene un valor de 0 por defecto.

• a es igual a 1 si la declaración proviene de un atributo de estilo en el código HTML ("los estilos en línea") en lugar de una regla CSS con un selector.
• b es igual al número de id´s que haya en su selector.
• c es igual al número de otros atributos y pseudo-clases en el selector.
• d es igual al número de elementos y pseudo-elementos en el selector.

¿Difícil de entender? Mejor con un ejemplo práctico de un selector cualquiera:

Veamos el último ejemplo en detalle: Tenemos a = 0, ya que es un selector, no una declaración estilo en línea. Hay un selector id (# nav), por lo que b = 1. Hay un selector de atributo (.miclase) Y una pseudo-clase (:link), por lo que c = 2. Hay cinco tipos de elementos (html, head, body, ul, a), por lo que d = 5. La especificidad final es: 0,1,2,5.

Nota que los combinadores (como >, + y el espacio en blanco) no afectan a la especificidad del selector. El selector universal (*) no tiene ninguna entrada en la especificidad, como tampoco la cadena !important. Así que la prevalencia de las declaraciones que incluyen la palabra calve !important no es por especificidad sino por importancia.

Hay una gran diferencia en la especificidad entre un selector de id y un selector de atributo que contenga como valor del atributo un id. La especificidad de #nav es 0,1,0,0, mientras que la especificidad de [id="nav"] es sólo 0,0,1,0.

El valor tan alto en la especificidad de los identificadores únicos (#id) es una de las razones invocadas por algunos "modernos del css" para entonar la cancioncilla de "id´s malos, no los uses".

Orden de aparición

Por orden de aparición de la declaración se entiende el lugar físico del documento css donde aparece escrita. Y en caso de haber varios archivos css, el lugar que ocupa la llamada al archivo Css en el Html que la contiene respecto a los demás archivos .
Así, si tenemos 4 archivos css (no importa el método de inclusión) en caso de conflicto prevalece el último, y dentro de éste tiene más peso una declaración en la línea 100ª que en la 1ª.

Así que lo último que se lee es lo que manda.

Qué es la herencia en Css

La herencia es distinta de la cascada ya que involucra al árbol (DOM) del documento.
La herencia en CSS es el mecanismo mediante el cual ciertas propiedades se transmiten de un elemento padre a sus hijos. Y sí, es bastante similar a la herencia de la genética.

Nota que he resaltado lo de "ciertas propiedades". Esto es porque no todas las propiedades se heredan. Así por ejemplo color, font sí, pero otras no, como tamaños, float, margin.

Para saber si una propiedad en concreto es heredada o no lo mejor es consultar la especificación. En todas ellas es un dato que se menciona explícitamente.

Adenda: Glosario de términos Css del artículo:

Estilos del agente de usuario

Cada navegador tiene unos estilos para aplicar en caso de que el documento carezca de ellos. Puedes ver cuáles son desactivándolos en cualquier página. "Web developer" o complementos similares te lo permite hacer de una forma sencilla.

Estilos del usuario

Por usuario entiende el visitante de la página. Los navegadores permiten en su configuración que la persona que lo utiliza incluya estilos propios (del usuario).

Estilos del autor

Los estilos del autor son los propios de cada documento. Son los que acompañan a cada documento para ser visto como el diseñador del mismo ha decidido.

!important

La cadena !important se puede añadir al valor de una propiedad para declarar su prevalencia con independencia de su orden, especificidad o procedencia.

Artículo publicado inicialmente el 2/5/2012

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso