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.
- Posición y orden de aparición: El orden en el que aparecen las reglas CSS
- Especificidad: un algoritmo que determina qué selector CSS tiene la coincidencia más fuerte
- 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
- 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.
<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.
<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?
<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.
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:
- Estilos base de usuarios-agentes Estos son los estilos que tu navegador aplica a los elementos HTML de forma predeterminada.
- 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.
- CSS creado. El CSS que creaste
- Autor:
!important. Cualquier!importantque agregues a tus declaraciones creadas - Estilos de usuario local
!important. Cualquier!importantque provenga del nivel del sistema operativo o a nivel de extensión de navegador CSS. - Usuario-agente
!important. Cualquier!importantque se defina en el CSS predeterminado, que proporciona el navegador.
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?
!important tiene el origen más específico.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:
- tipo de regla normal, como
font-size,backgroundocolor animationtipo de regla- Tipo de regla
!important(siguiendo 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 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.
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...