After the HTML has been parsed, it's time to parse the CSS (found in in external CSS files and in style elements) and build the CSSOM tree (CSS Object Model).
4. CSS PARSING
When the browser encounters a CSS stylesheet, be it external or embeded, it needs to parse the text into something it can use for styling the layouts. The data structure that the browser turns the CSS into is called the CSSOM. The DOM and the CSSOM follow similar concepts, in the sense that they are both trees, but they are different data structures. Just like building the DOM out of our HTML, building the CSSOM out of CSS is considered a render-blocking process.
Tokenization & building the CSSOM
Similar to HTML parsing, CSS parsing starts with tokenization. The CSS parser takes the bytes and converts them into characters, then tokens, then nodes and finally they are linked into the CSSOM. The browser does something called selector machting which means that each set of styles will be matched against all nodes (elements) on the page.
The browser starts with the most general rule applicable to a node (e.g: if a node it's the child of the body element, then all body styles are inherited by that node) and then recursively refines the computed styles by applying more specific rules. This is why we say that the style rules are cascading.
Imagine we have the HTML and CSS below:
body {
font-size: 16px;
color: white;
}
h1 {
font-size: 32px;
}
section {
color: tomato;
}
section .mainTitle {
margin-left: 5px
}
div {
font-size: 20px;
}
div p {
font-size: 8px;
color: yellow;
}
The CSSOM for this code would look something like this:
Note that in the schema above, the nested elements have both inherited styles (from the parent - e.g: h1 inherits its color from the body and the section inherits its font-size from the body) and their own styles (which can overwrite rules inherited from the parent or not - e.g: p overwrites both the color and the font-size inherited from the div and mainTitle doesn't get its left margin from a parent node).
Since we can have multiple sources for our CSS and they can contain rules that apply to the same node, the browser must decide which rule will apply in the end. That's when specificity comes into play and if you want to read more about it, you can visit this page.
Imagine you're in the airport and you're looking for your friend John. If you want to find him by calling out his name, you could call for "John". Chances are that more than one John will be in the airport at the same time, so they might all respond. A better approach would be to call your friend using his full name, so that when you shout "John Doe", you'll have better chances to finding him, since "John Doe" is more specific than just "John".
On the same note, let's say we have this element:
<p>
<a href="https://dev.to/">This is just a link!</a>
</p>
and these CSS styles:
a {
color: red;
}
p a {
color: blue;
}
Which rule do you think will the browser apply? The answer is the second rules, since all anchor tags inside a paragraph selector combination has more specificity than just all anchor tags selector. If you want to play around with specificity, you can use this Specificity calculator.
IMPORTANT
CSS rules are read from right to left, meaning that if we have something like: section p { color: blue; }, the browser will first look for all p tags on the page and then it will look if any of those p tags have a section tag as a parent. If that's the case, it will apply the CSS rule.
Refrence materials:
Top comments (1)
Loving this series!!