CSS Basics: How CSS Handles Declaration Precedence?
Have you ever thought or still are thinking that CSS applies rules and declarations precedence depending only on source order, meaning the last declaration would take precedence over the above declaration? I have, until I recently got acquainted with Udemy course on advanced CSS. Even though source order of the declaration is considered in determining which rule to apply, it is the least of the three factors that are taken into consideration.
Before diving into CSS rule precedence process let me first try to illustrate how the process of parsing in HTML and CSS unfolds behind the door.
First HTML is parsed, then the document object model (DOM) tree is created. During HTML Parsing process the stylesheet linked at the header section will be loaded.
In the next step of the process, CSS will be parsed, CSS parsing, however, is a bit complex. The CSS parsing process has two phases, first one is resolving CSS declaration conflicts through a process called Cascade, and the second phase is the process of values parsing in which values declared in relative units such as percentage are converted into pixels depending on the screen size. After CSS is parsed the final CSS is also stored in a tree-like structure called CSS object model (CSSOM).
After both the HTML (DOM) and CSS (CSSOM) are ready we have the rendered tree and this creates the visual formatting model that it responsible to finally display the website on the browser.
The main concept I want to talk about in this blog, however, is the Cascade process, that is how CSS decided which rule to apply where different rules are declared with different selectors and from different sources. I want to write about this process because it is vital for understanding CSS.
In this process different stylesheets are combined into one and conflicts that can arise between different CSS rules and declarations are resolved. Conflicts arise because more that one rule can be applied to a certain element in the HTML. CSS declaration can originate from different sources, they can be declared in the browser (default), users can set rules from the browser and of course from declarations written by the author or developer of the stylesheet.
To determine the precedence of a declaration, CSS considers the Importance, Specificity and Source Order of the declaration.
Importance —
Rules declared with the keyword !important are the first and most important CSS declarations. When the keyword !important written in a declaration, the declaration by the Users has higher importance that the declaration written by the Author or Developer. If a declaration doesn’t contain the keyword !important the Authors' declaration has precedence over the Users’. The least important declarations are rules declared by the Browser as a default rule.
- User !important declaration
- Author !important declaration
- Author declaration
- User declaration
- Default browser declaration
Specificity —
What happens if the rules have the same importance but there is conflict in the declaration? For instance, the CSS declared by the developer has the same importance but the same element can be targeted with different selectors. In this case, the Cascade calculates and compare the specificity of selectors. Selectors are compared with the following priorities:
- Inline styles
- IDs
- Classes, Pseudo-classes, attribute
- Elements, Pseudo-elements
Each declaration will be scored according to the priority and occurrences of a selector. The declaration with the highest value will be more specific and thus the rule of the most specific declaration will be applied.
In the above example, all the declarations are referring to the button with the class button, they all, however, are using different combinations of selectors. In such case CSS through the Cascade process will calculate the value and occurrence of each selector and the selector with the highest value, in this case, the second declaration will be applied.
Source Order —
The final step to be considered to decide which declaration wins is Source Order. This takes place if the declarations have the same importance and specificity. In this case, then you are right, for the last declaration in the code will override all other declaration and the rule of the last declaration will be applied.
This blog is the first part of the CSS basics blogs series I have inline and hopefully, you get something out of it.
