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
86
CSS Modules
Think local, start compose!
Daniele Bertella
July 27, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
280
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
230
サプライチェーン攻撃に備える
ryunen344
0
390
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
230
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
250
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
160
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.3k
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
Next.js のページ遷移を全力で止める
ypresto
9
3.6k
『GRANBLUE FANTASY: Relink』専任エンジニアチームで回す大規模開発QAサイクル
cygames
0
110
Mocking in Rust Applications
taiki45
2
420
Featured
See All Featured
Infographics Made Easy
chrislema
239
18k
Practical Orchestrator
shlominoach
185
10k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Gamification - CAS2011
davidbonilla
79
5k
Navigating Team Friction
lara
183
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Optimizing for Happiness
mojombo
375
69k
How STYLIGHT went responsive
nonsquared
93
5.1k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
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