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
92
CSS Modules
Think local, start compose!
Daniele Bertella
July 27, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
CSS polyfill とその未来
ken7253
0
140
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
170
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Rebase エンジニアリング組織の現状とこれから
rebase_engineering
0
140
Cloud Run を解剖して コンテナ監視を考える / Breaking Down Cloud Run to Rethink Container Monitoring
aoto
PRO
0
110
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.1k
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
RDRA3.0を知ろう
kanzaki
2
430
データプレーンプログラミングとは? DPU&スイッチASICの開発経験から語る
ebiken
PRO
1
260
GitHub Coding Agent 概要
kkamegawa
1
1.6k
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
790
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
The Pragmatic Product Professional
lauravandoore
35
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLとの向き合い方2022年版
quramy
46
14k
What's in a price? How to price your products and services
michaelherold
245
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
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