Cascada y herencia en CSS

Existen dos términos importantes para comprender como es que  trabaja realmente el lenguaje CSS... Herencia y cascada.

Al aplicar estilo a un documento HTML llegará el momento en que varias reglas definidas afectaran al mismo elemento ¿Qué regla será aplicada? Otro caso se presenta cuando al querer aplicar estilos a un elemento específico, dicho elemento no refleja los estilos plasmados en la regla CSS ¿Porqué pasa esto? ¿Porqué no muestra el estilo que le estoy aplicando? Es normal  que estos detalles al iniciar con el lenguaje de estilos CSS nos desconcierten.

Para comprender el porque del comportamiento CSS, veamos los dos fundamentos básicos que nos ayudarán a despejar muchas dudas y lograr un código CSS más pulcro y funcional.

Cascada

Con solo ver el nombre del lenguaje CSS (Hojas de estilo en cascada), puede uno darse cuenta que el término cascada es algo importante para el lenguaje. El concepto cascada en CSS se refiere a que los estilos serán aplicados a los elementos html conforme el orden en el que se encuentren de forma descendente dentro de la hoja de estilos; Es decir que la declaración de la ultima regla será tomada en cuenta por sobre las anteriores en caso de afectar a un mismo elemento.

Dentro de la cascada hay tres factores determinantes para establecer que regla será aplicada a un elemento en caso de que dos o más declaraciones intenten afectar a dicho elemento.

!important;

Esta regla CSS se asegura de que la declaración de estilo que la contenga, se anteponga a las anteriores sin importar la especificidad o el orden en que se encuentre el código.
Veamos el siguiente ejemplo; En una hoja de estilos encontramos el siguiente fragmento de código aplicado a un mismo elemento html, un párrafo.

 p{
 color: blue!important;
 }
 #paragraph{
 color: red; 
 }

Tomando en cuenta lo antes mencionado sobre la cascada y la especificidad (que veremos más adelante ), es obvio pensar que el estilo aplicado al párrafo sería el del selector id paragraph, pero gracias a la regla !importan la primer declaración del selector por etiqueta p sobresale de la otra.

Nota: es importante evitar esta regla a menos que sea estrictamente necesario, ya que el uso excesivo de dicha regla genera un código poco mantenible y a la larga genera problemas a la hora de aplicar estilo.
Haz uso de esta regla para sobrescribir código css externo de librerías o frameworks.

Especificidad

La especificidad se refiere a que tan específico es un selector a la hora de seleccionar algún elemento HTML, es decir que cantidad de elementos selecciona. Así por ejemplo los selectores de elementos es decir p,h1,div,li etc. son menos específicos que un selector de id que unicamente se puede aplicar a un solo elemento.

Entonces veamos la siguiente lista con el nivel de especificidad por el tipo de selector partiendo del menos específico iniciando en 1, hasta el que lo es más.

1. Selectores por tipo [ h1, p, li, span ... ] y pseudo-elementos [ :after, :before ].

2. Selectores de clase [ .paragraph ], pseudo-clases [ :hover, :target ...] y selectores de atributos [ [name='value'], [type='hidden'] ].

3. Selectores de id [ #paragraph ].

4. Regla declarada dentro del atributo style de un elemento HTML.

Orden del código

Si llegado hasta este punto el nivel de importancia y de especificidad para varios selectores es el mismo, el último factor para determinar cual selector sobresale del resto para ser aplicados sus estilo es el orden en que aparece en el código, las ultimas reglas declaradas sobresalen de las primeras.

Después de haber visto los factores que influyen en la aplicación de estilos por cascada, es importante hacer mención de la posible combinación de reglas.Esto debido a que unas propiedades prevalecen sobre otras, más no reglas enteras prevalecen sobre las otras. Cuando dos o más reglas intentan aplicar estilo a un mismo elemento todas los estilos se aplican a él, para después evaluar los conflictos entre las propiedades y determinar que estilos prevalecen sobre otros.

Herancia

La herencia en CSS implica que algunos elementos heredan a sus hijos ciertas propiedades, pero no todas las propiedades son heredables. Esto es mas bien un tema de sentido común, porque por ejemplo tiene sentido que las propiedades font-family y color sean heredables pues permite establecer un estilo y color de fuente a la etiqueta html que es la raíz de todos los elementos, para después modificar esas propiedades a cada elemento dentro de html que lo requieran.

Para controlar la herencia de las propiedades que cuentan con ello, existen tres valores:

• inherit Establece el valor de la propiedad al mismo que su padre.
  
• initial Establece el valor de la propiedad al valor de la hoja de estilos del navegador.
  
• unset Este valor restablece la propiedad a su valor natural.
  

Es esencial comprender la cascada y sus factores para resolver los conflictos que se presentan a la hora de definir que estilos se aplican a cada elemento. Es confuso al principio pero conforme se avanza con CSS se despejan las dudas.
En un próximo artículo continuaremos el tema con ejemplos más prácticos.