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 Modules
Search
Daniele Bertella
July 27, 2016
Technology
1
89
CSS Modules
Think local, start compose!
Daniele Bertella
July 27, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
290
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Storybook との上手な向き合い方を考える
re_taro
2
300
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Application Development WG Intro at AppDeveloperCon
salaboy
0
200
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
170
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Bash Introduction
62gerente
608
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Being A Developer After 40
akosma
87
590k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Done Done
chrislema
181
16k
Happy Clients
brianwarren
98
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
YesSQL, Process and Tooling at Scale
rocio
169
14k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Transcript
Think local and compose! 26 july 2016 @milanofrontend
JS Frontend Developer at LinkMe Srl Twitter: @_denb In love
with React and Javascript in general. I’m a 7-month-old dad Daniele Bertella
CSS
React: CSS in JS by vjeux
OOCSS, ACSS, BEM, SMACSS
<Button class="btn"> <Button class="btn btn--state-success"> <Button class="btn btn--state-danger">
None
CSS in JS
<Button type="button" className="btn btn--primary"> <PrimaryBtn />
<Button type="button" class="SomeLibBtn flamey-text rainbowborder" style={{fontSize: "4rem"}} >
If you’re writing React, you have access to a more
powerful styling construct than CSS class names. You have components.
React: CSS in JS by vjeux
CSS in JS https://github.com/MicheleBertoli/css-in-js React: CSS in JS techniques comparison
None
CSS Modules
Not inline styles, just classes, CSS classes
.title { font-size: 36px; }
No more Global Scope
<h1 class="title__App__3Q9Zt" >Titolo</h1>
No more Overqualified Selectors
.home h1.big { font-size: 36px; }
Refactoring made it easy
<Title>Titolo</Title>
How does it work?
Composes
.title { font-size: 14px } .h1 { composes: title; composes:
bold from ‘./base. css’; }
<h1 class="h1__App__45dEA title__App__3Q9Zt bold__Common__qA8s1" >Titolo</h1>
:global
:global .title { font-size: 14px }
<h1 class="h1__App__45dEA title bold__Common__qA8s1" >Titolo</h1>
@value
@value primary-color: #b04208 .title { color: primary-color; }
@value primary-color from 'css/base.css'; .title { color: primary-color; }
Atomic CSS Modules
.image { composes: left p2 mr1 border from 'basscss/css/basscss.css'; }
<div class="image__App-styles__2Smk3 left__basscss__3v_U_ p2__basscss__F9Oep mr1__basscss__3xYN_ border__basscss__2qjJA" ><img src=... /></div>
Atomic CSS Modules https://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27
Are CSS Modules right for my (next) project?
Maybe
Happy with BEM?
NO
Component architecture?
YES
QUESTIONS?
Thanks @_denb