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
96
CSS Modules
Think local, start compose!
Daniele Bertella
July 27, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
180
データエンジニアがこの先生きのこるには...?
10xinc
0
440
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
stupid jj tricks
indirect
0
7.9k
20250929_QaaS_vol20
mura_shin
0
110
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.4k
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
Green Tea Garbage Collector の今
zchee
PRO
2
390
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
400
Trust as Infrastructure
bcantrill
0
340
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Building Adaptive Systems
keathley
43
2.8k
For a Future-Friendly Web
brad_frost
180
9.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Making Projects Easy
brettharned
119
6.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
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