The CSS Cascade
is the way our browsers resolve competing CSS declarations.
Cascading Style Sheets
Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
p {
color : red;
}
p {
color : green !important;
}
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}p {
color : red;
}
p {
color : green !important;
}
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}
p {
color : green !important;
}
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}
Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
For normal rules the declaration from the outer context wins
and for important rules the
declaration from the inner context wins
<style>
p {
color: green;
}
</style>
<link rel="stylesheet" href="styles.css">Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
"Declarations such as the content of a style attribute take predecence over declarations mapped via style rule
<p style="color: orange;">Ce texte est orange</p>Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
p {
color : green !important;
}
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}https://polypane.app/css-specificity-calculator/
p {
color : green !important;
}
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}https://polypane.app/css-specificity-calculator/
Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
p.error {
color : orangered !important;
}
p.error {
color : red !important;
}
p.error {
color : red !important;
}p.error {
color : orangered !important;
}
p.error {
color : red !important;
}Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
Origin and Importance
Context
Style Attribute
Specificity
Order of Appearance
Layers
The general principle is simple: the order of declaration of the layers (Layers Order) has priority over the specificity of the selectors.
@layer reset {
* {
margin: 0;
padding: 0;
}
}@layer reset;@import url(reset.css) layer(reset);Add properties
@layer base { /* Create 1st layer named “base” */
…
}
@layer theme { /* Create 2rd layer named “theme” */
…
}
@layer base { /* Create 1st layer named “base” */
…
}
@layer theme { /* Create 2rd layer named “theme” */
…
}
@layer base { /* Append to existing layer named “base” */
…
}
/* Order remains the same when re-using a layer name*/@layer theme, reset;
@layer reset {
…
}
@layer theme {
…
}Last one
wins
Specificity and Order of Appearance still are important, but only inside one and the same Layer.
>
=
@layer base {
form input {
font-size: inherit;
}
}
@layer theme {
input {
font-size: 2rem;
}
}
@layer base {
form input {
font-size: inherit;
}
}
@layer theme {
input {
font-size: 2rem;
}
}
@layer theme {
input {
font-size: 2rem;
}
}With unlayered properties ?
/* Some Unlayered Styles */
h1 { color: hotpink; }
@layer theme {
body h1 { color: rebeccapurple; }
}
/* Some Unlayered Styles */
h1 { color: hotpink; }
@layer theme {
body h1 { color: rebeccapurple; }
}
/* Some Unlayered Styles (winner) */
h1 { color: hotpink; }
- Priorités de style claires
- Organisation, cohérence des styles
- Facilité de maintenance
- Performances améliorées
- Personnalisation du thème
- Collaboration d'équipes
UI Theme Switching
https://www.oidaisdes.org/cascade-layers-in-angular.en/
Key
Takeaways
Key
Takeaways
La cascade css c'est pas si pire
Key
Takeaways
- Origin / Importance
- Specificity
- Order of Appearance
Voir le conflit dans le navigateur
@layers nous redonne la main
sur les priorités
Copy of deck
By Laura Pedenaud