La cascada

Podcast del CSS - 004: The Cascade

CSS significa hojas de estilo en cascada. La cascada es el algoritmo para resolver conflictos en los que se aplican reglas de CSS múltiples a un elemento HTML. Es por ello que el texto del botón con el estilo del siguiente CSS aparecerá en azul.

button {
  color: red;
}

button {
  color: blue;
}

Comprender el algoritmo en cascada te ayuda a entender cómo el navegador resuelve conflictos como este. El algoritmo en cascada se divide en 4 etapas distintas.

  1. Posición y orden de aparición: El orden en el que aparecen las reglas CSS
  2. Especificidad: un algoritmo que determina qué selector CSS tiene la coincidencia más fuerte
  3. Origen: El orden en que aparece el CSS y de dónde proviene, ya sea un estilo de navegador CSS de una extensión del navegador o el CSS que creaste
  4. Importancia: Algunas reglas de CSS tienen más peso que otras en especial con el tipo de regla !important

Posición y orden de aparición

La cascada tiene en cuenta el orden en que aparecen las reglas de CSS y cómo lo hacen. mientras calcula la resolución de conflictos.

La demostración que aparece al comienzo de esta lección es el ejemplo más claro de posición. Hay dos reglas que tienen selectores de especificidad idéntica, así que ganó el último que se declarara.

Los estilos pueden provenir de varias fuentes en una página HTML, como una etiqueta <link>, una etiqueta <style> incorporada y CSS intercalado, como se define en el atributo style de un elemento.

Si tienes un elemento <link> que incluye CSS en la parte superior de la página HTML, Luego, otra <link> que incluya CSS en la parte inferior de la página: la <link> inferior tendrá la mayor especificidad. Lo mismo sucede con los elementos <style> incorporados. Se hacen más específicos, cuanto más abajo están en la página.

El botón tiene un fondo azul, según lo define CSS, que se incluye mediante un elemento <link />. Una regla de CSS que define el color oscuro está en una segunda hoja de estilo vinculada y se aplica debido a su posición posterior.

Este orden también se aplica a los elementos <style> incorporados. Si se declaran antes de un <link>, el CSS de la hoja de estilo vinculada tendrá la mayor especificidad.

El elemento <style> se declara en <head>, mientras que el elemento <link /> se declara en <body>. Esto significa que obtiene más especificidad que el elemento <style>.

Un atributo style intercalado con CSS declarado anulará todos los demás CSS. independientemente de su posición, a menos que en una declaración se defina un !important.

La posición también se aplica en el orden de tu regla CSS. En este ejemplo, el elemento tendrá un fondo púrpura porque background: purple se declaró en último lugar. Debido a que el fondo verde se declaró antes que el fondo púrpura, ahora el navegador lo ignora.

.my-element {
  background: green;
  background: purple;
}

Poder especificar dos valores para la misma propiedad puede ser una forma sencilla de crear resguardos para los navegadores que no admiten un valor determinado. En el siguiente ejemplo, font-size se declara dos veces. Si el navegador admite clamp(), Luego, se descartará la declaración font-size anterior. Si el navegador no admite clamp(), haz lo siguiente: se respetará la declaración inicial y el tamaño de la fuente será de 1.5 rem,

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la cascada

Si tienes el siguiente código HTML en tu página:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

Dentro de styles.css, se encuentra la siguiente regla de CSS:

button {
  background: yellow;
}

¿De qué color es el fondo del botón?

rosado
El origen <style> incorporado está más abajo en la página que el etiqueta <link>, de modo que, si bien la especificidad de button es la misma, el position de la regla de estilo hace que gane.
amarillo
En el documento HTML, es posible que se haya leído el fondo del botón amarillo. pero luego se descubrió una nueva regla de la misma especificidad lo que hace que esta regla no se aplique al botón.

Especificidad

La especificidad es un algoritmo que determina qué selector CSS es el más específico usando un sistema de ponderación o puntuación para hacer esos cálculos. Al hacer que una regla sea más específica, puedes hacer que se aplique incluso si aparece alguna otra CSS que coincida con el selector más adelante en el CSS.

En la siguiente lección, aprenderás los detalles de cómo se calcula la especificidad, Sin embargo, tener algunas cosas en mente te ayudará a evitar demasiados problemas de especificidad.

CSS que segmente una clase en un elemento hará que esa regla sea más específica y, por lo tanto, se consideran más importantes de aplicar, que el CSS que segmente solo el elemento. Esto significa que, con el siguiente CSS, h1 tendrá un color rojo, aunque ambas reglas coincidan y la del selector h1 aparezca más adelante en la hoja de estilo.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

Un id hace que el CSS sea aún más específico. por lo que los estilos aplicados a un ID anularán a los que se aplican de muchas otras formas. Este es uno de los motivos por los que, en general, no se recomienda adjuntar estilos a una id. Puede hacer que sea difícil reemplazar ese estilo con algo más.

La especificidad es acumulativa

Como podrás ver en la próxima lección, a cada tipo de selector se le otorgan puntos que indican qué tan específico es, los puntos de todos los selectores que usaste para apuntar a un elemento se suman. Esto significa que si te orientas a un elemento con una lista de selección, como a.my-class.another-class[href]:hover obtienes algo bastante difícil de reemplazar con otro CSS. Por este motivo, y para hacer que tu CSS sea más reutilizable, recomendamos que los selectores sean lo más simples posible. Usa la especificidad como una herramienta para llegar a los elementos cuando sea necesario, pero siempre considera refactorizar listas de selectores largas y específicas, si es posible.

Origen

El CSS que escribes no es el único que se aplica a una página. La cascada tiene en cuenta el origen del CSS. Este origen incluye la hoja de estilo interna del navegador, los estilos que agregan las extensiones del navegador o el sistema operativo, y el CSS que creaste. El orden de especificidad de estos orígenes, desde el menos específico hasta el más específico, es el siguiente:

  1. Estilos base de usuarios-agentes Estos son los estilos que tu navegador aplica a los elementos HTML de forma predeterminada.
  2. Estilos de usuario local. Estas pueden provenir del nivel del sistema operativo, como un tamaño de fuente base o una preferencia de movimiento reducido. También pueden provenir de extensiones del navegador, como una extensión de navegador que permite al usuario escribir su propio CSS personalizado para una página web.
  3. CSS creado. El CSS que creaste
  4. Autor: !important. Cualquier !important que agregues a tus declaraciones creadas
  5. Estilos de usuario local !important. Cualquier !important que provenga del nivel del sistema operativo o a nivel de extensión de navegador CSS.
  6. Usuario-agente !important. Cualquier !important que se defina en el CSS predeterminado, que proporciona el navegador.
Una demostración visual del orden de los orígenes, como también se explica en la lista.

Si tienes una regla !important en el CSS que creaste y el usuario tiene un tipo de regla !important en su CSS personalizado, ¿qué CSS gana?

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los orígenes en cascada

Pon a prueba tus conocimientos sobre los orígenes en cascada, considera el siguiente estilo reglas de varios orígenes:

Estilo de usuario-agente

h1 { margin-block-start: 0.83em; }

Arranque

h1 { margin-block-start: 20px; }

Estilos de autor de la página

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

Estilo personalizado del usuario

h1 { margin-block-start: 2rem !important; }

Luego, con el siguiente código HTML:

<h1>Lorem ipsum</h1>

¿Cuál es el margin-block-start final de la h1?

20 px
El arranque es parte del origen del autor, que pierde el importante estilo de usuario local.
0.83 cm
El origen del estilo del usuario-agente pierde el estilo de usuario local importante.
2 notas
Este estilo personalizado de usuario de !important tiene el origen más específico.
2 canales
Este estilo de autor es parte del origen del autor, que le falta al importante estilo de usuario local.
1 canal
Este estilo de autor es parte del origen del autor, que le falta al importante estilo de usuario local.

Importancia

No todas las reglas de CSS se calculan entre sí. o tienen la misma especificidad entre sí.

El orden de importancia, desde el menos importante, a los más importantes es el siguiente:

  1. tipo de regla normal, como font-size, background o color
  2. animation tipo de regla
  3. Tipo de regla !important (siguiendo el mismo orden que el origen)
  4. transition tipo de regla

Los tipos de reglas de transición y animación activas tienen mayor importancia que las reglas normales. En el caso de las transiciones de mayor importancia que los tipos de reglas !important. Esto se debe a que, cuando se activa una animación o transición su comportamiento esperado es cambiar el estado visual.

Cómo usar las Herramientas para desarrolladores para descubrir por qué no se aplica CSS

Las Herramientas para desarrolladores del navegador generalmente muestran todas las CSS que podrían coincidir con un elemento. y los que no se usan tachados.

Imagen de las Herramientas para desarrolladores del navegador con CSS reemplazado tachado

Si no aparece el CSS que esperabas aplicar, entonces no coincidió con el elemento. En ese caso, necesitas buscar en otro lugar, tal vez por un error tipográfico en el nombre de una clase o un elemento, o alguna CSS no válida.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la cascada

The Cascade se puede utilizar para...

Resolución de conflictos cuando se aplican varios estilos a un elemento
Este es uno de sus principales objetivos, la resolución de conflictos.
Asegúrate de que solo haya un valor de estilo para cada propiedad en el momento de dibujar.
El texto solo puede ser de un color, y The Cascade es una forma de determinar cuál debería ser.
Reglas de estilo de puntuación y ponderación.
La puntuación y la ponderación forman parte de la fase de clasificación de La Cascada.
Ordenar y filtrar atributos de estilo
El ordenamiento y el filtrado son fases de The Cascade que ayudan a comprender los aspectos de la resolución de conflictos.

Recursos