Nothing is that !important

A talk about CSS specificity

Transcript

1. Nothing is that !important A talk about CSS specificity By Cara Heacock
2. CSS specificity is a pretty basic topic… • It’s the Cascading part of Cascading Style Sheets • The rules for which CSS rules take precedence over others • However, many web developers struggle to grasp how CSS specificity works
3. What is the !important property? Source: https://css-tricks.com/when-using-important-is-the-right-choice/ • !important is a property that overrides CSS’s normal cascading by making your CSS rule always work • e.g. color: red !important; • I feel like CSS Tricks summarized why devs use !important pretty well:
4. The Dangers of !important • To override !important rules, you (or future devs) have to add more !importants .sidebar { background-color: #a066b7 !important; } • CSS becomes difficult to maintain and difficult to make changes because it becomes a labyrinth of !important rules .blog .sidebar { background-color: #e7cdf2 !important; } • Some people don’t understand how to override CSS rules and resort to “!important”
5. Pop Quiz! How well do you know CSS specificity? (It’s okay to get these wrong, because then I know my talk is helpful.) Don’t freak out
6. What color is the div? <div class="my-div"></div> div { background-color: pink; } .my-div { background-color: blue; }
7. What color is the div? <div class="my-div"></div> div { background-color: pink; } .my-div { background-color: blue; } I'm blue! (da ba dee, da ba die…)
8. What color is the div? <div class="my-div"></div> .my-div { background-color: blue; } div { background-color: pink; }
9. What color is the div? <div class="my-div"></div> .my-div { background-color: blue; } div { background-color: pink; } Still blue!
10. What color is the div? <div class="my-div" id="special-div"></div> .my-div { background-color: blue; } #special-div { background-color: pink; }
11. What color is the div? <div class="my-div" id="special-div"></div> .my-div { background-color: blue; } #special-div { background-color: pink; } I'm pink!
12. What color is the div? <div class="my-div my-box" id="special-div"></div> #special-div { background-color: pink; } .my-div.my-box { background-color: blue; }
13. What color is the div? <div class="my-div my-box" id="special-div"></div> #special-div { background-color: pink; } .my-div.my-box { background-color: blue; } Still pink!
14. What color is the div with the "inner" class? <div class="outer"> <div class="inner"></div> </div> div.outer .inner { background-color: pink; } .inner { background-color: blue; }
15. What color is the div with the "inner" class? <div class="outer"> <div class="inner"></div> </div> div.outer .inner { background-color: pink; } .inner { background-color: blue; } I'm pink!
16. What color is the div with the "inner" class? <div class="outer"> <div class="inner" id="inner"></div> </div> div.outer > .inner { background-color: pink; } #inner { background-color: blue; }
17. What color is the div with the "inner" class? <div class="outer"> <div class="inner" id="inner"></div> </div> div.outer > .inner { background-color: pink; } #inner { background-color: blue; } I'm blue!
18. What color is the div with the "inner" class? <div class="outer special-outer"> <div class="inner special-inner"></div> </div> .inner.special-inner { background-color: blue; } .outer .inner { background-color: pink; }
19. What color is the div with the "inner" class? <div class="outer special-outer"> <div class="inner special-inner"></div> </div> .inner.special-inner { background-color: blue; } .outer .inner { background-color: pink; } I'm pink!
20. What color is the div with the "inner" class? <div class="outer special-outer"> <div class="inner special-inner" id="inner"></div> </div> #inner { background-color: blue; } div.outer.special-outer > .inner.special-inner { background-color: pink; }
21. What color is the div with the "inner" class? <div class="outer special-outer"> <div class="inner special-inner" id="inner"></div> </div> #inner { background-color: blue; } div.outer.special-outer > .inner.special-inner { background-color: pink; } I'm blue!
22. What color is the div with the "inner" class? <div class="outer special-outer"> <div class="inner special-inner" id="inner"></div> </div> div.outer.special-outer > div#inner.inner.special-inner { background-color: pink; } * { background-color: blue !important; }
23. What color is the div with the "inner" class? <div class="outer special-outer"> <div class="inner special-inner" id="inner"></div> </div> div.outer.special-outer > div#inner.inner.special-inner { background-color: pink; } * { background-color: blue !important; } I'm blue!
24. What did we learn? Maybe some of you are like… But maybe some of you are like… "Yay, I know this stuff!" "What is happening ):"
25. CSS Specificity works So now let's learn how
26. Think of CSS selectors in terms of 4 digits Elements # Classes / Attributes IDs Inline Style # # #
27. Think of CSS selectors in terms of 4 digits Elements # Classes / Attributes IDs Inline Style # # # • The higher the number, the higher the precedence • If the specificity is the same for multiple selectors, the last selector will apply • Selectors with digits further to the left will always take precedence over selectors with digits further to the right • e.g. A selector with 1 ID will always override a selector with 50 classes
28. Element Selector • Selects HTML tags that match that name • e.g. <div>, <p>, <li> div { /* ... */ } 0 0 0 1 ul li { /* ... */ } 0 0 0 2 body div p strong { /* ... */ } 0 0 0 4
29. Class/Attribute Selector • Selects elements by class or attribute • Always more specific than element-only selectors • e.g. <div class="my-div">, <input type="text"> .my-div { /* ... */ } 0 0 1 0 .btn.btn-large { /* ... */ } 0 0 2 0 input.form-control [type="text"] { /* ... */ } 0 0 2 1
30. ID Selector • Selects elements by ID • Always more specific than selectors with only classes, attributes, and/or elements • e.g. <div id="special-div">, <p id="introduction"> #special-div { /* ... */ } 0 1 0 0 main#blog-layout { /* ... */ } 0 1 0 1 body.single #content #sidebar button.btn.btn-large { /* ... */ } 0 2 3 2
31. Inline Style • CSS in the style attribute • Always more specific than CSS in stylesheets or <style> blocks <div style="background- color: red;"></div> 1 0 0 0
32. !important property • Outweighs everything, all the time, ever • The only way to override it is with another !important and more specific selectors • You can think of it like a 5th digit * { background-color: red !important; } 0 0 0 0 .my-div { background-color: red !important; } 0 0 1 0 #content #sidebar.blog- sidebar > div { background-color: red !important; } 0 2 1 1 1 1 1
33. Other Things to Know • The global selector (*) adds no specificity. Neither do selectors such as > (direct child), + (next sibling), ~ (general sibling), etc. • Pseudo-classes (:first-child) also count as classes • The pseudo-class :not has no specificity, but its argument adds specificity • e.g. div.my-div:not(.other-div) – 0, 0, 2, 1
34. Other Things to Know • Tree proximity does not matter • e.g. "html h1" and "body h1" are both 0, 0, 0, 2, so whichever selector is second will take effect • Styles for directly targeted elements will always take precedence over styles for the parent element (even !important on the parent element styles!) #my-div { background-color: pink; color: blue !important; } h1 { background-color: blue; color: pink; } Pink Text
35. Review Quiz! I'm sorry.
36. What color is the div? <div class="my-div"></div> /* 0, 0, 0, 1 */ div { background-color: pink; } /* 0, 0, 1, 0 */ .my-div { background-color: blue; }
37. What color is the div? <div class="my-div"></div> /* 0, 0, 0, 1 */ div { background-color: pink; } /* 0, 0, 1, 0 */ .my-div { background-color: blue; } I'm blue!
38. What color is the div? <div class="my-div special-div super- div ultimate-div"></div> /* 0, 0, 2, 1 */ div.my-div.special-div { background-color: pink; } /* 0, 0, 2, 1 */ div.super-div.ultimate-div { background-color: blue; }
39. What color is the div? <div class="my-div special-div super- div ultimate-div"></div> /* 0, 0, 2, 1 */ div.my-div.special-div { background-color: pink; } /* 0, 0, 2, 1 */ div.super-div.ultimate-div { background-color: blue; } I'm blue!
40. What color is the div? <div class="my-div special-div super- div" id="really-important-div"></div> /* 0, 1, 1, 0 */ #really-important-div.my-div { background-color: pink; } /* 0, 0, 3, 1 */ div.my-div.special-div.super-div { background-color: blue; }
41. What color is the div? <div class="my-div special-div super- div" id="really-important-div"></div> /* 0, 1, 1, 0 */ #really-important-div.my-div { background-color: pink; } /* 0, 0, 3, 1 */ div.my-div.special-div.super-div { background-color: blue; } I'm pink!
42. Further Reading • CSS Specificity A funny and easy to understand illustrated guide to CSS specificity http://cssspecificity.com/ • Mozilla Developer Network: Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity • CSS Tricks: Specifics on CSS Specificity https://css-tricks.com/specifics-on-css-specificity/ • CSS Tricks: When Using !important Is the Right Choice https://css-tricks.com/when-using-important-is-the-right-choice/
43. Thanks! Questions? @caraheacock ! github.com/caraheacock " caraheacock.com # caraheacock@gmail.com $