El podcast de CSS - 004: The Cascade
CSS significa Hojas de estilo en cascada. La cascada es el algoritmo para resolver conflictos en los que se aplican varias reglas CSS a un elemento HTML. Es por esto que el texto del botón con el siguiente estilo CSS será azul.
button {
color: red;
}
button {
color: blue;
}
Comprender el algoritmo de cascada te permite conocer la manera en que el navegador resuelve este tipo de conflictos. El algoritmo de cascada se divide en 4 etapas distintas.
- Posición y orden de aparición: El orden en el que aparecen tus reglas CSS
- Especificidad: Es un algoritmo que determina qué selector CSS tiene la coincidencia más sólida.
- Origin: Es el orden en el que aparece y de dónde proviene el CSS, ya sea un estilo de navegador, CSS de una extensión del navegador o el CSS creado por ti.
- Importancia: Algunas reglas de CSS tienen un peso mayor que otras, especialmente con el tipo de regla
!important.
Posición y orden de aparición
El orden en el que aparecen tus reglas de CSS y cómo aparecen se toma en cuenta en la cascada mientras se calcula la resolución de conflictos.
La demostración que aparece justo al comienzo de esta lección es el ejemplo más directo de posición. Hay dos reglas que tienen selectores de especificidad idéntica, por lo que ganó la última que se declarará.
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 <link> que incluye CSS en la parte superior de tu página HTML, otro <link> que incluya CSS en la parte inferior: el <link> inferior tendrá más especificidad.
Lo mismo sucede con los elementos <style> incorporados.
Son más específicos, cuanto más abajo se encuentran en la página.
<link />.
Una regla de CSS que establece que sea oscuro se encuentra 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 será el que tenga mayor especificidad.
<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 en él anulará todos los demás CSS, independientemente de su posición, a menos que una declaración tenga !important definido.
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.
Como el fondo verde se declaró antes que el 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 en particular.
En el siguiente ejemplo, font-size se declara dos veces.
Si el navegador admite clamp(), se descartará la declaración font-size anterior.
Si el navegador no admite clamp(), se respetará la declaración inicial y el tamaño de la fuente será de 1.5rem.
.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?
<style> incorporado está más abajo en la página que la etiqueta <link>, por lo que, si bien la especificidad de button es la misma, la posición de la regla de diseño la hace ganadora.
Especificidad
La especificidad es un algoritmo que determina qué selector de CSS es el más específico, mediante un sistema de ponderación o puntuación para realizar esos cálculos. Si haces que una regla sea más específica, puedes hacer que se aplique incluso si otro CSS que coincide con el selector aparece más adelante en el CSS.
En la siguiente lección, puedes aprender los detalles de cómo se calcula la especificidad. Sin embargo, tener en cuenta algunos aspectos te ayudará a evitar demasiados problemas de especificidad.
La segmentación de CSS a una clase en un elemento hará que esa regla sea más específica y, por lo tanto, se considerará más importante que se aplique que CSS que se oriente solo al elemento.
Esto significa que con el siguiente CSS, h1 tendrá un color rojo, aunque ambas reglas coincidan, y la regla del selector h1 aparecerá más adelante en la hoja de estilo.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
Un elemento id hace que el CSS sea aún más específico, por lo que los diseños aplicados a un ID anularán los aplicados de muchas otras maneras.
Este es uno de los motivos por los que, en general, no es una buena idea adjuntar estilos a un id.
Puede resultar difícil reemplazar ese estilo por otro.
La especificidad es acumulativa
Como podrás descubrir en la siguiente lección, a cada tipo de selector se le otorgan puntos que indican su especificidad, los puntos de todos los selectores que utilizaste para apuntar a un elemento se suman juntos.
Esto significa que, si orientas un elemento con una lista de selectores como a.my-class.another-class[href]:hover, obtendrás algo bastante difícil de reemplazar por otro CSS.
Por este motivo, y para que tu CSS sea más reutilizable, te recomendamos que mantengas los selectores lo más simples posible.
Usa la especificidad como una herramienta para llegar a los elementos cuando lo necesites, 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 agregados por las extensiones del navegador o el sistema operativo, y el CSS creado. El orden de especificidad de estos orígenes, desde el menos específico hasta el más específico, es el siguiente:
- Estilos de la base de usuario-agente. Estos son los estilos que tu navegador aplica a los elementos HTML de forma predeterminada.
- Estilos de usuario locales. 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 del navegador que permite que un usuario escriba su propio CSS personalizado para una página web.
- CSS creado. El CSS que creas
- Autor:
!important. Cualquier!importantque agregues a las declaraciones creadas. - Estilos de usuario local
!important. Cualquier!importantque provenga del nivel del sistema operativo o de la CSS a nivel de la extensión del navegador - Usuario-agente
!important. Cualquier!importantdefinido en el CSS predeterminado que proporciona el navegador
Si tienes un tipo de 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 el origen de la cascada
Pon a prueba tus conocimientos sobre los orígenes de cascada y considera las siguientes reglas de diseño de diversos orígenes:
Estilo 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 último margin-block-start de h1?
!important tiene el origen más específico.Importancia
No todas las reglas de CSS se calculan de la misma manera ni se les otorga la misma especificidad entre sí.
El orden de importancia, del menos importante al más importante, es el siguiente:
- tipo de regla normal, como
font-size,backgroundocolor animationtipo de regla!importanttipo de regla (en el mismo orden que el origen)transitiontipo de regla
Los tipos de reglas de transición y animación activas tienen mayor importancia que las reglas normales.
En el caso de transiciones de mayor importancia que !important tipos de reglas.
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 averiguar por qué algunos CSS no se aplican
Por lo general, las Herramientas para desarrolladores del navegador mostrarán todas las CSS que podrían coincidir con un elemento, con las que no se usan tachadas.
Si el CSS que esperabas aplicar no aparece, quiere decir que no coincide con el elemento. En ese caso, debes buscar en otro lugar, ya sea porque hay un error tipográfico en el nombre de una clase o un elemento, o de alguna CSS no válida.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre la cascada
La cascada se puede usar para lo siguiente: