Charlotte FED - CSS Inheritance and Specificity
-
Upload
sarah-hudson -
Category
Software
-
view
31 -
download
0
Transcript of Charlotte FED - CSS Inheritance and Specificity
![Page 1: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/1.jpg)
CSS Inheritance &Specificity
Sarah Hudson
![Page 2: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/2.jpg)
What is specificity?
![Page 3: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/3.jpg)
Answer:1)How browsers determine which CSS properties to apply to an element when multiple, conflicting rules are given.
2)The weight given to each ruleset, determined by the selectors given.
![Page 4: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/4.jpg)
Is specificity different from inheritance?
Short answer, yes.
Inheritance refers to how child nodes inherit their parent nodes’ styling, how styling cascades.
Specificity refers to how the browser determines which styles to apply to an element.
Specificity can come into play in overriding inherited styles, but child nodes don’t technically inherit the parents’ specificity rules
In other words -- You can use inheritance rules as guidelines to write selectors, but don’t rely on the parents’ specificity to style child elements.
![Page 5: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/5.jpg)
But why does this matter? Anyone can learn CSS in an hourAnyone can learn & write CSS quickly but understanding specificity matters if:
You work on a large team with many developers
You are pulled onto a legacy project
You need to update a theme (i.e., Shopify, Wordpress, Squarespace)
You’re working on an open source project
You can’t touch the HTML
![Page 6: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/6.jpg)
How do browsers decide what styles apply?
![Page 7: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/7.jpg)
How browsers
work● Networking layer opens XHR requests to server for docs and assets
● UI backend contains default styles
● HTML and CSS are parsed by the Rendering Engine
![Page 8: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/8.jpg)
How browsers work, cont
● Rendering Engine: Will fetch files in 8KB chunks
● Content Tree: HTML and content parsed first
● Render Tree: Style attributes and CSS parsed, determines the order of content
● Layout Tree: Node coordinates are calculated
● Paint: The browser’s UI Backend processes the information from the trees and displays it on the screen
![Page 9: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/9.jpg)
How browsers parse CSS
Browsers download CSS files as they’re linked and create StyleSheet objects which contain rules
The browser traverses the DOM tree, and then traverses all rulesets in CSS to match the values in class attributes to selectors in rulesets
Browsers read selectors right to left; the last selector is called the key selector
![Page 10: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/10.jpg)
Making the decision, overview
Browsers take three things into account before applying CSS:
1.Source Order
a.Whichever ruleset comes last will be applied
2.Specificity
a.Whichever ruleset carries greater weight / more specific selectors will be applied
3.Importance
a.Whichever ruleset is marked as being more important will be applied
![Page 11: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/11.jpg)
Making the decision via specificity
The most specific selector: If more than one declaration applies to the same element, then the most specific selector wins
I.e., h2.headline will apply over .headline
This also works in overriding inherited styles, i.e., p > .red will override p.
The most weighted selector: The selector that has the highest specificity weight will win
I.e., #sidebar { … } weighs more than aside { … }
Equal weight: The last ruleset downloaded will be applied
I.e., .sidebar and .side-navigation
![Page 12: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/12.jpg)
So how does specificity specifically work?
![Page 13: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/13.jpg)
Specificity Weights
Built in rules assign weights to different selectors:
Tag selectors, pseudo-elements: 1 point
I.e., a { … }
Class selectors, attributes, pseudo-classes: 10 points
I.e., .headline { … }
ID selectors: 100 points
I.e., #sidebar
Inline CSS: 1000 points
!important: ∞
While technically not part of specificity, this overrides all rules of specificity EXCEPT when two conflicting rulesets both employ it.
![Page 14: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/14.jpg)
Two visuals of calculating specificity
1.Add the weights by 10s 2. Fill in the number of each selector in its respective 1s, 10s, etc space to determine the weight
![Page 15: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/15.jpg)
Specificity Is Additive
The longer your selector is, the higher the specificity weight is. Examples:
.sidebar li { … } = 10 + 1 = 11
.sidebar li a { … } = 10 + 1 + 1 = 12
#main-content .sidebar { … } = 100 + 10 = 110
#main-content .sidebar li { … } = 100 + 10 + 1 = 111
And so on...
![Page 16: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/16.jpg)
![Page 17: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/17.jpg)
Quick Exercise: How much weight is given?1.div {}
a.Answer: 1 (1 tag element)
2.ul li {}a. Answer: 2 (2 tag elements)
3.ul.special-links li a {}a. Answer: 13 (3 tag elements and 1 class)
4.ul.special-links li a:hover {}a. Answer: 23 (3 tag elements, 1 class, 1 pseudo-class)
5.ul.special-links li:not(a) {}a. Answer: 13 (3 tag elements, 1 class, negation is 0)
6.aside[id=“navbar”] header h2 {}a. Answer: 13 (3 tags, 1 attribute)
7.h1 + *[rel=up] {}a. Answer: 11 (1 tag and 1 attribute)
![Page 18: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/18.jpg)
That’s cool & all but can you show me some code?
![Page 19: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/19.jpg)
What ruleset will win? Example #1
<footer class=“main-footer”>
<a href=“#about-us” class=“navigation--link site-map--link”>About Us</a>
</footer>
.main-footer a { color: white }
a.site-map--link { color: darkblue }
a { color: blue; }
a.navigation--link { color: skyblue }
Answer: It’ll be sky blue because all the selectors have the same weight, except for the tag selector, and the navigation--link is the last one
![Page 20: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/20.jpg)
What ruleset will win? Example #2
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Contact</a></li>
</ul>
li > a { color: green; }
li a { color: brown; }
Answer: It will be brown because the selectors are equal weight; it chooses the last one. It’s important to note that combinators such as > and ~ have no weight on specificity. They’re a part of inheritance instead, ensuring we only grab the a tags directly under our li tags, but we don’t apply the declarations to a tags which are in divs in li elms
![Page 21: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/21.jpg)
What ruleset will win? Example #3
What color will the links be give this structure?
<aside id="sidebar">
<section id="salads">
<ul>
<li><a href="#">Cobb Salad</a></li>
</ul>
</section>
</aside>
aside#sidebar a {background-color: yellow; }
aside#sidebar a[href="#"] {background-color: lightgreen;}
section#salads li a {background-color: aliceblue;}
Answer:The background will be light green. This is because attribute selectors have a specificity weight of 10, thus making it 1 + 100 + 1 + 10 = 112
![Page 22: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/22.jpg)
What ruleset will win? Example #4
What color will the text be given this structure?
<section id=“intro-text”>
<p>Lorem ipsum…</p>
</section>
section#intro-text {color: red !important;}
p {color: darkgrey;}
Answer: Specificity is not inherited. Since we’re using the parent element as a selector, it will apply to the parent element, but selecting “p” is more specific to the “p” tag than the parent’s selector. Thus the paragraph will be grey.
![Page 23: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/23.jpg)
What ruleset will win? Example #5
What color will the text be given this structure, where we apply .orange-text on the last span?
Hint: We have 11 element selectors in the first ruleset
html body main section header h2 div span span span span {color: purple;}
.orange-text {color: orange;}
Answer: 11 beats 10, right? Well...if this were simply math, but classes will always beat out elements. That’s the tricky thing about specificity. Each step up will always beat out the step beneath it.
![Page 24: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/24.jpg)
What ruleset will win? Example #6 <section>
<header>
<h2 style="color: red;" class="test-important-text">Test</h2>
</header>
</section>
style="color: red;"
.test-important-text {color: purple !important;}
Answer: Inline styles are closer to the DOM, so those should apply, right? In this case, remember that !important breaks all specificity rules. It is the only way to override inline styles. So it will be purple.
![Page 25: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/25.jpg)
What are some best practices?
![Page 26: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/26.jpg)
Simplicity is best
Keep selectors as short and simple as possible to ensure that stylesheets are:
Easily maintainable, readable, reusable, & intuitive
Easy to onboard (for new developers on the team)
Easy to come back to after months
Not chock full of convoluted rules tripping over each other
*** Use highly specific selectors as the exception, not the rule, whenever possible
![Page 27: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/27.jpg)
Use classes whenever possible
● Element selectors should mainly be used for resets, and resets should mainly be done to level the browser playing field
● Element selectors are too general and end up with adding more rulesets for different styling/conditions
● Multiple resets mean that style rules were applied too early and are usually the cause of specificity battles
● Classes are more semantic and provide specific intent
○ I.e., the selector .article-title instead of article > header > h2
● Separation of concerns -- CSS semantics are different from/more granular than HTML semantics
![Page 28: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/28.jpg)
More best CSS practices
● Rulesets should do one thing
○ I.e., .align-left should only float to the left; .slider should only describe necessary items for slider component (no page layout, etc)
○ This allows you to reuse, mix and match
○ Follows modular approach the web is moving towards
○ Less issues with overwriting rules down the road
● Give classes semantic, intuitive names
○ I.e., .primary-brand-color is better than .dark-blue or using the color throughout selectors
○ Prevents brute force overriding when dev can’t find relevant classes
![Page 29: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/29.jpg)
What are some anti-patterns?
![Page 30: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/30.jpg)
Antipatterns, Pt. I!important
Reasons:
Breaks specificity rules and is nearly impossible to override
Can result in bugs
Makes it difficult for developers / designers new to the project
IDs
Reasons:
IDs have a specificity weight of 100, making them difficult to override and impossible to override with classes
Can lead to bugs / complicated CSS
Style objects can’t be shared among siblings when IDs are present
Note: IDs are meant to be landmarks
Descendents / child selectors
Reason: It is an expensive call and slows processing/paint time
![Page 31: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/31.jpg)
Antipatterns, Pt. IILong / unnecessarily specific selectors
Example: body .container .sidebar .links
Reasons:
Adds weight and causes slower processing / paint times as it has to traverse the DOM to check for an exact match
Adds confusion in terms of readability / maintainability
Violates DRY
Qualified Selectors
Example: div.container aside.sidebar a.links
Reasons:
Unnecessary, as the browser can find the classes without the elem
Adds weight and causes slower processing / paint times
Violates DRY
Not readable, reusable, or maintainable
![Page 32: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/32.jpg)
FIN
![Page 33: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/33.jpg)
Resources
Smashing Magazine -- CSS Specificity: Things You Should Know
Mozilla’s Specificity Docs
Smashing Magazine -- CSS Specificity & Inheritance
How browsers work: Behind the scenes of modern web browsers
Specificity calculator
CSS Wizardry
This presentation’s specificity examples
![Page 34: Charlotte FED - CSS Inheritance and Specificity](https://reader036.fdocuments.in/reader036/viewer/2022081521/589d76c71a28ab69538b4fa3/html5/thumbnails/34.jpg)
Contact meEmail: [email protected]:@SarahHudson2008Website:www.sarah-hudson.com