CSS Specificity

Transcript

1. Matija Marohnić CSS Specificity
2. A little bit about me • frontend developer and blogger • obsessed with generating static sites • DX evangelist • open source • automate all the things • follow me on Twitter: @silvenon
3. MDN Web docs “Specificity is the means by which browsers decide which property values are the most relevant to an element and, therefore, will be applied.”
4. X Y Z type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
5. 0 0 1 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
6. 0 1 2 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
7. 1 2 2 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
8. 0 54 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors A trick to bump specificity
9. 0 1 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
10. • these don’t affect specificity: • universal selector (*) • combinators (+, >, ~, etc.) • negation pseudo-class (:not())
11. 0 0 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
12. 0 1 1 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors
13. 1 0 0 0 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors inline style
14. 1 0 0 0 1 type selectors, pseudo-elements class selectors, attribute selectors, pseudo-classes ID selectors inline style !important
15. When to use !important • as little as possible • basically only to override third-party styles
16. An alternative to !important Lorem ipsum dolor, sit amet consectetur adipisicing elit.
17. The best way to increase specificity is…
18. • the lower the specificity, the easier it is to manage • plus, this way we keep repetition out of HTML …source order.
19. The color of the paragraph is: 1. red 2. green 3. blue 4. fuchsia Quiz!
20. Happy styling!