Skip to content

Commit

Permalink
Move specificity and cascade under CSS cascade module (#38125)
Browse files Browse the repository at this point in the history 
* Move specificity under cascade

* Move cascade under cascade module
  • Loading branch information
@estelle
estelle authored Feb 12, 2025
1 parent 594eb75 commit a29769d
Show file tree
Hide file tree
Showing 65 changed files with 191 additions and 189 deletions.
6 changes: 4 additions & 2 deletions files/en-us/_redirects.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,7 +469,7 @@
/en-US/docs/CSS/CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
/en-US/docs/CSS/CSS_values_serialization /en-US/docs/Web/CSS
/en-US/docs/CSS/CSS_values_syntax /en-US/docs/Web/CSS
/en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/Cascade
/en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade
/en-US/docs/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator
/en-US/docs/CSS/Class_selectors /en-US/docs/Web/CSS/Class_selectors
/en-US/docs/CSS/Comments /en-US/docs/Web/CSS/Comments
Expand Down Expand Up @@ -523,7 +523,7 @@
/en-US/docs/CSS/Scaling_background_images /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images
/en-US/docs/CSS/Scaling_of_SVG_backgrounds /en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
/en-US/docs/CSS/Shorthand_properties /en-US/docs/Web/CSS/Shorthand_properties
/en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/Specificity
/en-US/docs/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity
/en-US/docs/CSS/Syntax /en-US/docs/Web/CSS/Syntax
/en-US/docs/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow
/en-US/docs/CSS/Tutorial/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
Expand Down Expand Up @@ -11940,6 +11940,7 @@
/en-US/docs/Web/CSS/CSS_transform_functions /en-US/docs/Web/CSS/transform
/en-US/docs/Web/CSS/CSS_values_serialization /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/CSS_values_syntax /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/Cascade /en-US/docs/Web/CSS/CSS_cascade/Cascade
/en-US/docs/Web/CSS/Child_selectors /en-US/docs/Web/CSS/Child_combinator
/en-US/docs/Web/CSS/Common_CSS_Questions /en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ
/en-US/docs/Web/CSS/Compositing_and_Blending /en-US/docs/Web/CSS/CSS_compositing_and_blending
Expand Down Expand Up @@ -11970,6 +11971,7 @@
/en-US/docs/Web/CSS/Reference/object-position /en-US/docs/Web/CSS/object-position
/en-US/docs/Web/CSS/Selector_lists /en-US/docs/Web/CSS/Selector_list
/en-US/docs/Web/CSS/Selectors /en-US/docs/Web/CSS/CSS_Selectors
/en-US/docs/Web/CSS/Specificity /en-US/docs/Web/CSS/CSS_cascade/Specificity
/en-US/docs/Web/CSS/Text-overflow_TEST /en-US/docs/Web/CSS/text-overflow
/en-US/docs/Web/CSS/Tools /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/Tools/Border-image_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
Expand Down
168 changes: 84 additions & 84 deletions files/en-us/_wikihistory.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76239,6 +76239,90 @@
"Fredchat"
]
},
"Web/CSS/CSS_cascade/Cascade": {
"modified": "2020-07-27T13:35:05.470Z",
"contributors": [
"wbamberg",
"jswisher",
"mfuji09",
"fazl",
"marcelobcortes",
"birtles",
"agarun",
"ExE-Boss",
"dashlee92",
"oliverbaptiste",
"01abhishekjain",
"michaeljgut",
"Sheppy",
"Biiinggg",
"mfluehr",
"chrisdavidmills",
"merelinguist",
"verv0eren",
"HarryPehkonen",
"malozaibi",
"Sebastianz",
"mrevan",
"rralian",
"nasifmdtanjim",
"velvel53",
"teoli"
]
},
"Web/CSS/CSS_cascade/Specificity": {
"modified": "2020-11-14T16:01:00.890Z",
"contributors": [
"mfuji09",
"An-Error94",
"ExE-Boss",
"elias6",
"Sajag",
"Aerodium",
"CodeLight",
"estelle",
"tommygebru",
"tama200",
"mfluehr",
"sekkuar",
"rileym7",
"Anawriter1",
"dustinryerson",
"yannicka",
"Artoria2e5",
"RobinHu",
"david_ross",
"chrisprobably",
"jnachtigall",
"fcard",
"jsx",
"rolfedh",
"PushpitaPikuDey",
"Tigt",
"kmhrussell17",
"kustolovic",
"SeriouslyAwesome",
"mina86",
"diraniyoussef",
"rralian",
"mflodin",
"ahmedsai001",
"dawsonda",
"mkollra01",
"applescr",
"Sebastianz",
"SphinxKnight",
"kscarfone",
"pablofiumara",
"FredB",
"teoli",
"ethertank",
"Sheppy",
"MattBrubeck",
"fryn",
"jwalker"
]
},
"Web/CSS/CSS_cascading_variables": {
"modified": "2020-07-07T12:03:44.891Z",
"contributors": ["wbamberg", "mfluehr"]
Expand Down Expand Up @@ -77890,37 +77974,6 @@
"teoli"
]
},
"Web/CSS/Cascade": {
"modified": "2020-07-27T13:35:05.470Z",
"contributors": [
"wbamberg",
"jswisher",
"mfuji09",
"fazl",
"marcelobcortes",
"birtles",
"agarun",
"ExE-Boss",
"dashlee92",
"oliverbaptiste",
"01abhishekjain",
"michaeljgut",
"Sheppy",
"Biiinggg",
"mfluehr",
"chrisdavidmills",
"merelinguist",
"verv0eren",
"HarryPehkonen",
"malozaibi",
"Sebastianz",
"mrevan",
"rralian",
"nasifmdtanjim",
"velvel53",
"teoli"
]
},
"Web/CSS/Child_combinator": {
"modified": "2020-10-15T21:04:19.088Z",
"contributors": [
Expand Down Expand Up @@ -78498,59 +78551,6 @@
"alecananian"
]
},
"Web/CSS/Specificity": {
"modified": "2020-11-14T16:01:00.890Z",
"contributors": [
"mfuji09",
"An-Error94",
"ExE-Boss",
"elias6",
"Sajag",
"Aerodium",
"CodeLight",
"estelle",
"tommygebru",
"tama200",
"mfluehr",
"sekkuar",
"rileym7",
"Anawriter1",
"dustinryerson",
"yannicka",
"Artoria2e5",
"RobinHu",
"david_ross",
"chrisprobably",
"jnachtigall",
"fcard",
"jsx",
"rolfedh",
"PushpitaPikuDey",
"Tigt",
"kmhrussell17",
"kustolovic",
"SeriouslyAwesome",
"mina86",
"diraniyoussef",
"rralian",
"mflodin",
"ahmedsai001",
"dawsonda",
"mkollra01",
"applescr",
"Sebastianz",
"SphinxKnight",
"kscarfone",
"pablofiumara",
"FredB",
"teoli",
"ethertank",
"Sheppy",
"MattBrubeck",
"fryn",
"jwalker"
]
},
"Web/CSS/Subsequent-sibling_combinator": {
"modified": "2020-10-15T21:04:16.746Z",
"contributors": [
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/semantics/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ In HTML, for example, the {{htmlelement("Heading_Elements", "h1")}} element is a
<h1>This is a top level heading</h1>
```

By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted).
By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted).

On the other hand, you could make any element _look_ like a top level heading. Consider the following:

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: learn-module-chapter

{{LearnSidebar}}

This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/Specificity).
This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).

If you are new to CSS, working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course. However, knowing the basics of what cascade layers are should you encounter them in your projects is helpful. The more you work with CSS, understanding cascade layers and knowing how to leverage their power will save you from a lot of pain managing a code base with CSS from different parties, plugins, and development teams.

Expand Down Expand Up @@ -45,15 +45,15 @@ The 'C' in CSS stands for "Cascading". It is the method by which styles cascade
2. **Importance:** Sort rules based on whether they are normal or important. Important styles are those that have the [`!important`](/en-US/docs/Web/CSS/important) flag set.
3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin.
4. **Cascade layers:** Within each of the six origin importance buckets, sort by cascade layer. The layer order for normal declarations is from the first layer created to the last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence.
5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/Specificity).
5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
6. **Scoping proximity**: When two selectors in the origin layer with precedence have the same specificity, the property value within scoped rules with the smallest number of hops up the DOM hierarchy to the scope root wins. See [How `@scope` conflicts are resolved](/en-US/docs/Web/CSS/@scope#how_scope_conflicts_are_resolved) for more details and an example.
7. **Order of appearance:** When two selectors in the origin layer with precedence have the same specificity and scope proximity, the property value from the last declared selector with the highest specificity wins.

For each step, only the declarations "still in the running" move on to "compete" in the next step. If only one declaration is in the running, it "wins", and the subsequent steps are moot.

### Origin and cascade

There are three [cascade origin types](/en-US/docs/Web/CSS/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence:
There are three [cascade origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence:

1. user-agent normal styles
2. user normal styles
Expand All @@ -68,9 +68,9 @@ The "user-agent" is the browser. The "user" is the site visitor. The "author" is

### Origin and specificity

For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins.
For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins.

In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) and [`color`](/en-US/docs/Web/CSS/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence.
In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) and [`color`](/en-US/docs/Web/CSS/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/CSS_cascade/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence.

```html live-sample___basic-cascade
<p><a href="https://example.org">User agent styles</a></p>
Expand All @@ -86,7 +86,7 @@ In the example below, there are two links. The first has no author styles applie

{{EmbedLiveSample("basic-cascade")}}

The "competing" selector in the user-agent stylesheet at the time of this writing is `a:any-link`, which has a specificity weight of `0-1-1`. While this is greater than the `0-0-0` selector in the author stylesheet, even if the selector in your current user agent is different, it doesn't matter: the specificity weights from author and user-agent origins are never compared. Learn more about [how specificity weight is calculated](/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated).
The "competing" selector in the user-agent stylesheet at the time of this writing is `a:any-link`, which has a specificity weight of `0-1-1`. While this is greater than the `0-0-0` selector in the author stylesheet, even if the selector in your current user agent is different, it doesn't matter: the specificity weights from author and user-agent origins are never compared. Learn more about [how specificity weight is calculated](/en-US/docs/Web/CSS/CSS_cascade/Specificity#how_is_specificity_calculated).

Origin precedence always wins over selector specificity. If an element property is styled with a normal style declaration in multiple origins, the author style sheet will always override the redundant normal properties declared in a user or user-agent stylesheet. If the style is important, the user-agent stylesheet will always win over author and user styles. Cascade origin precedence ensures specificity conflicts between origins never happen.

Expand Down
Loading

0 comments on commit a29769d

Please sign in to comment.