How does CSS works behind the scenes?

Here in this article, we are going to learn about CSS parsing phase.

By Jonas Schmedtmann

First, let do a quick review of the terms that we find in a CSS rule. A rule consists of a selector and a declaration block.

Selector is use to select one or more HTML element that we want to style. Each declaration consists of a CSS property and its corresponding value. This value we assign to the property is called the declared value.
 
Now, Let's talk about the CSS parsing phase.

Resolve Conflicting CSS Declaration(Cascading)

Cascading is the process of combining different stylesheet and resolving conflicts between different CSS rules and declarations when having more than one rules that are applicable to a certain element.

Eg: font-size property can appear in several stylesheets and also several times inside one single stylesheet.

CSS come from these different sources:

1. Author Declarations (css that developers write)
2. User Declarations (setting done by the user in the browser eg. setting font-size in the browser)
3. Browser Declarations (also known as user-agent, default browser declarations)

Cascade combines the CSS declarations coming from all these different sources.

But how does the cascade actually resolve conflicts?
It does it by looking at the importance, specificity and source order of conflicting declarations in order to determine which one takes the precedence.

Here is the order how we look at the importance, specificity and source order for all the matching rules.

By Jonas Schmedtmann

Importance

A rule that has !important directive is always applied no matter where that rule appears in the CSS document.

The most important declarations are user declarations marked with the important keyword. Next, the second most important declarations are the author declarations marked with important. Third, the normal author declarations, and finally the least important ones are the default browser declarations, which actually makes a lot of sense so that we can easily overwrite these declarations coming by default from the browser.

Let's look at an example to better understand :

Here we have two rules, both apply to the .btn class and we have two conflicting declarations about the background-color. 
Both are author declarations, but if you look closely in the first rule declaration with background-color: #000 contains the important keyword and therefore this declaration is more important as we can see from the above. This means this declaration will get precedence.

---

Specificity

Lots of time we will just have a bunch of conflicting rules in our author stylesheets without any important keyword. In this case, all the declarations have the exact same importance. If this is the case, the cascade does is calculate and compare the specificities of the declaration selectors.

There are four categories which define the specificity level of a selector:

1. Inline styles( has the highest specificity ) - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
2. IDs - An ID is a unique identifier for the page elements, such as #navbar.
3. Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements( has the least specificity ) - This category includes element names and pseudo-elements, such as h1, div, ::before and ::after.

We have 4 slots, and each one of them starts at 0.

• First Selector:  0 0 1 0 specificity because it has 1 class selector only.
• Second Selector:  0 1 2 2 specificity because it has 1 id selector, 2 class selector and 2 element selector.
• Third Selector: 0 0 0 1 specificity because it has 1 element selector.
• Forth Selector:  0 1 2 1 specificity because it has 1 id selector, 1 class selector, 1 pseudo-element, 1 element selector.

Now we have 4 specificities, we compare all the specificities from left to right.
Start with an Inline Style(most specific category), if there a selector with the inline style that selector will win against all the selector because it is the most specific category.

Well, this is not the case here, so let's move on to the IDs. Here we can see that the selector second and forth has ID specificity 1, so the one with zero are out of the game because they are less specific then selector second and forth.
Since both selectors have 1 in this category, we have to move on and check the next Classes category. In the Classes category, both selector second and forth has 2 so we move to the next.
In the Selector category, selector second has higher specificity then forth. So the selector second is the most specific selector of all so the background-color: blue.

Source Order

If all the declaration selector has the same specificity then it's simply the last declaration that will be used. 
The last declaration in the code will overwrite all other declaration and will be applied in the code.

Summary -

• CSS declarations marked with ! important have the highest priority.  (But, only use ! important as the last resource.)
• Inline styles will always have priority over styles in external stylesheets.
• The universal selector * has least specificity value (0, 0, 0, 0).
• Rely more on specificity than the order of selectors.
• When using 3rd-party stylesheets always put your author stylesheet last.

Follow me on Twitter, LinkedIn or GitHub.

I hope this article is useful to you. Thanks for reading & Keep Learning !!