This content originally appeared on DEV Community and was authored by Adebiyi Itunuayo
Continuing from Day 005.
Source Order/Order of Appearance: Keith says this is the final step to resolving the cascade. Remember, there were 6 steps:
Stylesheet origin
Inline styles
Selector specificity
Source order
Layer
Scope proximity
Layer, and Scope proximity are new additions to CSS. That’s why Source Order is the final step by the original standard before the additions.
Source Order is about the declaration that appears later in the stylesheet, or appears in a stylesheet included later on the page, taking precedence.
Therefore, if two or more conflicting rules are equal in specificity, the one that appears last wins; is more specific.
For example:
//Specificity (0,1,0)
.nav {
margin-top: 10px;
list-style: none;
padding-left: 0;
}
//Specificity (0,1,0)
.nav {
margin-top: 30px;
list-style: none;
padding-left: 0;
}
//Specificity (0,1,0)
.nav {
margin-top: 1px;
list-style: none;
padding-left: 0;
}
Given they all have the same specificity, Source Order ensures the last rule is applied:
.nav {
margin-top: 1px;
list-style: none;
padding-left: 0;
}
Elements bearing “nav” class have the third rule with its declarations applied to them.
This is useful in more ways than one can imagine, as you can reduce and increase specificity to ensure certain styles are applied when working on a personal large project, or with other developers. Knowledge of Source Order will come in handy.
Keith teaches something I’ve never seen mentioned around before;
- Don’t use IDs in your selectors.
- Don’t use
!importantflag The reason is because they make it difficult to override styles in the future.
I believe anyone can become a CSS Pro, and therefore I am.
This content originally appeared on DEV Community and was authored by Adebiyi Itunuayo