Aprende más de CSS – La cascada

2024/11/15

La cascada es un concepto muy importante en CSS, tanto que hasta es por esta funcionalidad que recibió su nombre. CSS es el acrónimo de Cascading Style Sheets (Hojas de Estilo en Cascada).

¿Pero qué es esto de la cascada?

Es un concepto que normalmente se confunde mucho con la herencia en CSS, pero a pesar de que se interconectan ambos temas, no son lo mismo.

La cascada se refiere a las reglas que definen que prioridad le debe de dar CSS a cada regla, cuando encuentra conflictos entre una o mas stylesheets. Esto tiene el objetivo de crear un solo archivo con todos los estilos y porsupuesto, sin conflictos.

Estas reglas de prioridad se crean diferenciando a cada declaración en base a 4 características:

Diferenciando declaraciones

Origen

De dónde viene la declaración.

Hay 3 posibles opciones:

  • El autor: Todos los archivos definidos en el código fuente de un aplicación o sitio web.
  • El usuario: Las configuraciones que haya hecho un usuario dentro de su navegador.
  • El User-Agent: Las configuraciones por default que tienen los navegadores para ciertos elementos de HTML.

*Un User-Agent es básicamente un navegador. Pero no solo es eso. Así que para saber más te recomiendo: Aprende que es un User-Agent en 5 minutos.

Importancia

Si se marco o no con el valor de CSS para importante.

h1 {
    color: blue !important;
}

Especificidad

La especificidad del selector de la declaración.

Las reglas de especificidad a grandes rasgos son:

Estilos inline

<section style="font-size: sp;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada dapibus eros, sollicitudin varius nibh fermentum nec. Nullam purus risus, dictum ac dapibus et</p>
</section>

Ids

#main-title {
    text-decoration: underline;
}

Clases, pseudo-clases y selectores de atributos

/* Clase */
.custom-link {
    background-color: darkgray;
}

/* Pseudo-clase */
a:hover {
    color: white;
}

/* Selector del atributo "target" */
a[target="_blank"] {
    font-size: 15sp;
}

Elementos y pseudo-elementos

/* Elemento */
h2 {
    font-style: italic;
}

/* Pseudo-elemento */
p::first-letter {
    font-size: xx-large;
}

Orden de Aparición

Si la regla aparece antes o después.

h2 {
    font-style: normal;
}

h2 {
    font-style: italic;
}

*En este caso la regla que establece el estilo de la fuente como itálica tiene prioridad por sobre la 2da. Es decir la última en aparecer es la que tiene prioridad.

Reglas de Ordenamiento

Dicho esto, una vez analizados los casos posible las reglas son bastante simples. CSS da prioridad a las declaraciones que encajen con cada elemento de la lista de ordenamiento de cascada.

La cuál es:

  1. Declaraciones de transición (css-transition)
  2. Declaraciones importantes del User-Agent
  3. Declaraciones importantes del usuario
  4. Declaraciones importantes del autor
  5. Declaraciones de animación
  6. Declaraciones normales del autor
  7. Declaraciones normales del usuario
  8. Declaraciones normales del User-Agent

Sin embargo puede ser algo difícil entender estas reglas con tanta terminología. Por suerte ya vimos a que se refieren con autor, usuario y user-agent. Pero veamos a que se refieren las declaraciones de animación y transición.

Ambas son tipos de declaraciones que se utilizan para realizar animaciones con CSS. Aunque evidentemente tienen sus diferencias:

Declaraciones de transición (css-transition)

Permiten cambiar los valores de una propiedad gradualmente de un estado a otro durante un periodo definido de tiempo.

/* Estado inicial del elemento div */
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

/* Estado cuando se haga hover con el mouse sobre el elemento div */
div:hover {
  width: 300px;
}

/* Las características que debe tener la transición cuando cambia el estado de un div
2 segundos para transicionar del estado inicial de width al final
4 segundos para transicionar del estado inicial de height al final */
div {
  transition: width 2s, height 4s;
}

*Este ejemplo en específico puedes revisarlos en https://www.w3schools.com/css/css3_transitions.asp

Declaraciones de animación

Permiten cambiar los valores de una propiedad entre más de 2 estados. Dan un control más preciso de lo que se puede lograr con las declaraciones de transición.

/* El nombre de la animación */
@keyframes color-animation {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }
  
/* El elemento div con la animación que se va a realizar */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: color-animation;
    animation-duration: 4s;
}

*Este ejemplo en específico puedes revisarlos en https://www.w3schools.com/css/css3_animations.asp

Recapítulando

Una vez que ya tenemos esta información nos es más fácil saber a que estilos se les da prioridad. Veamos cada elemento de la lista:

  1. Declaraciones de transición (css-transition)
    • Las animaciones de transición son a las que se les da preferencia.
  2. Declaraciones importantes del User-Agent
    • Todo lo que los navegadores tengan en sus stylesheets por default y que hayan sido marcadas con !important.
  3. Declaraciones importantes del usuario
    • Todo lo que el usuario haya configurado con !important en la configuración de su navegador.
  4. Declaraciones importantes del autor
    • Todo lo que los desarrolladores, creadores hayan marcado con !important,
  5. Declaraciones de animación
    • Las animaciones de CSS que utilizan @keyframes. Tiene precedencia a cualquier regla que no haya sido marcada como !important ni que sean css-transitions.
  6. Declaraciones normales del autor
    • Todo lo que definan los creadores. Esto es lo default cuando estamos construyendo una aplicación o sitio.
  7. Declaraciones normales del usuario
    • Todo lo que definan el usuario en la configuración de su navegador.
  8. Declaraciones normales del User-Agent
    • El stylesheet con lo estilos por default del navegador. Esto abarca casi todo de lo que vemos de un HTML al que no le definimos una hoja de estilos propia.

Normalmente siempre llega un momento en nuestra vida como desarrolladores que tenemos problemas con los estilos de CSS. Tipícamente los arreglamos con un !important, pero ahora yua sabes la razón detrás de ello.