Concepto de cascada en CSS

Concepto de cascada en CSS

Print Friendly, PDF & Email
Concepto de cascada en CSS
5 (100%) 2 votos

La cascada es el mecanismo que controla el resultado final de como visualizaremos una etiqueta html cuando a esta se le apliquen distintas instrucciones CSS.

¿Te has fijado alguna vez que el navegador tiene estilos CSS que se aplican por defecto?

Por ejemplo si no indicamos lo contrario visualizamos una tipografía concreta, los textos son negros, los h1,h2,h3… h6 tienen un tamaño relativo distinto y están en negrita, … y podríamos ir leyendo la hoja de estilos por defecto del navegador.

Todo esto son declaraciones CSS descriptivas que «aparecen de la nada«.

¿Como es posible que si ahora indicamos que un texto ya no es negro la página web pasa a verse distinta?

¿A quién debe obedecer el compilador web?

Todo esto es posible gracias al concepto de cascada. Un mismo elemento puede estar sujeto a varias hojas de estilos CSS y existen unas normas que indican de forma inequívoca cual de todas las instrucciones es la que debe afectar a un determinado elemento html.

Resumen de contenidos de esta publicación

Existen 3 reglas básicos que en conjunto conforman el conjunto de normas de cascada que permiten determinar para cada elemento que declaración CSS tiene prioridad.

Importancia

Existen 3 categorías de hojas de estilos que pueden afectar a una etiqueta html:

  1. Las instrucciones declaradas de forma nativa en la hoja CSS del navegador.
  2. Las instrucciones declaradas en el navegador del usuario web. (Por ejemplo una persona con problemas de visión puede forzar que los textos tengan un tamaño de fuente a una escala mayor)
  3. Las instrucciones declaradas por el autor de la página web.

¿Aplicando el sentido común que instrucciones deberían tener prioridad?

Hoja de estilos (navegador, usuario o autor de la web)

Prioridad

Navegador
1
Navegador con instrucción !important
2
Usuario
3
Autor
4
Autor con instrucción !important
5
Usuario con instrucción !important
6

Una forma fácil de recordar es pensar que quién tiene menos prioridad es el propio navegador y que quién tiene más prioridad es el usuario.

La página queda en una posición media.

!important

!important debe usarse con moderación.

Es más… es mejor que no lo uses. Suele denotar un maquetador mediocre. O como mínimo, úsalo únicamente si no tienes más remedio.

Cuando el navegador lee !important otorga la máxima prioridad independientemente de otros estilos. Yo lo uso cuando quiero personalizar algún estilo en wordpress y no me queda más remedio porqué no soy quién a escrito la plantilla web.

Debes considerar también que un !important de orden superior tiene prioridad a uno de orden inferior.

Y que dados dos !important de igual orden tiene prioridad el último.

La tabla anterior te puede ayudar.

Especificidad

La especifidad es el conjunto de reglas que indican el peso de un selector CSS.

Para que sea fácil de entender imaginemos que cada tipo de selector tiene una puntuación.

El selector que suma más puntos es el que gana y el que por tanto terminaremos visualizando en la página web.

Lo mejor es ver un ejemplo.

selectores css especificidad
Ejemplo de selectores redundantes
código html ejemplo especificidad CSS
HTML ejemplo especificidad. ¿Con cuantos selectores diferentes podemos llamar una etiqueta html?

En las imágenes se observa el código html y el css de nuestro ejemplo.

Fijémonos que por ejemplo la segunda etiqueta li de nuestra lista no ordenada podría ser a priori lila, azul, amarillo, o verde.

¿Como sabe el navegador de que color debe pintar?

En primer lugar rastrea el documento en búsqueda de todas las instrucciones CSS que afectan una por una a todas y cada una de las etiquetas html del documento.

A continuación sigue una heurística que consiste en otorgar una puntuación a todos los posibles selectores que afectan a cada etiqueta html.

El selector que obtiene mayor peso es el que termina mandando.

Ejemplo de tabla de cálculo de especificidad CSS
Ejemplo tabla calculo especificidad

Imaginemos que queremos dotar de estilos CSS a los elementos li del código html del ejemplo.

Podríamos llamar a los elementos li, de muchas formas. Tengamos en cuenta los que aparecen en la tabla. Uno por fila.

Si tenemos en cuenta las siguientes puntuaciones

  • A: 1 si existe style (en línea)
  • B: Número de IDs
  • C: Número de clases y pseudoclases
  • D: Número de elementos y pseudoelementos

La tabla se rellenaría según la imagen.

Si tenemos en cuenta que la columna A > B > C > D

El resultado final coincide exactamente con el obtenido si guardamos el documento HTML y lo abrimos con un navegador.

documento html ejemplo especificidad vista navegador
Resultado final ejemplo especificidad (vista navegador)

Orden de aparición

A igualdad de especificidad entre selectores manda el último.

El motivo es que sobrescribe al anterior.

Y hasta aquí el concepto de cascada.

Una norma muy útil que nos ayuda a entender porqué vemos una web como la web cuando distintas instrucciones CSS colisionan.

Y no menos importante, un concepto que nos ayuda a entender aquello de «hojas de estilo en cascada«.

Nos leemos mañana, como siempre, con un nuevo contenido en el web.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.