Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Specificity
Search
Matija Marohnić
October 09, 2020
Programming
0
20
CSS Specificity
Matija Marohnić
October 09, 2020
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
94
Cypress vs. Playwright
silvenon
0
120
Studying Strapi: an open source head headless CMS
silvenon
0
23
Make your JavaScript projects more accessible to newcomers
silvenon
0
47
React Hooks
silvenon
0
57
PostCSS
silvenon
0
30
CSS Custom Properties
silvenon
0
25
Maintainable Integration Testing in React
silvenon
0
15
Writing Codemods with jscodeshift
silvenon
0
18
Other Decks in Programming
See All in Programming
Snowflakeで眠ったデータを起こそう!
estie
0
120
Elm Form Validation
bkuhlmann
0
510
GitHub Copilotのススメ
marcy731
1
200
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
VS Code をプロダクトにどう取り込むか
onomax
1
360
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
910
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
160
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
370
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
420
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
Ruby Function Composition
bkuhlmann
1
330
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Gamification - CAS2011
davidbonilla
76
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
We Have a Design System, Now What?
morganepeng
43
6.7k
The Cult of Friendly URLs
andyhume
74
5.7k
Designing Experiences People Love
moore
136
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Transcript
Matija Marohnić CSS Specificity
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
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.”
X Y Z type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 0 1 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 1 2 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
1 2 2 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 54 0 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors A trick to bump specificity
0 1 0 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
• these don’t affect specificity: • universal selector (*) •
combinators (+, >, ~, etc.) • negation pseudo-class (:not())
0 0 0 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
0 1 1 type selectors, pseudo-elements class selectors, attribute selectors,
pseudo-classes ID selectors
1 0 0 0 type selectors, pseudo-elements class selectors, attribute
selectors, pseudo-classes ID selectors inline style
1 0 0 0 1 type selectors, pseudo-elements class selectors,
attribute selectors, pseudo-classes ID selectors inline style !important
When to use !important • as little as possible •
basically only to override third-party styles
An alternative to !important Lorem ipsum dolor, sit amet consectetur
adipisicing elit.
The best way to increase specificity is…
• the lower the specificity, the easier it is to
manage • plus, this way we keep repetition out of HTML …source order.
The color of the paragraph is: 1. red 2. green
3. blue 4. fuchsia Quiz!
Happy styling!