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
APIテスト自動化の勘所
yokawasa
7
4.2k
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
570
Datachain会社紹介資料(2024年11月) / Company Deck
datachain
3
16k
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
620
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
100
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Gamification - CAS2011
davidbonilla
80
5k
KATA
mclloyd
29
13k
Happy Clients
brianwarren
97
6.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
RailsConf 2023
tenderlove
29
880
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Typedesign – Prime Four
hannesfritz
39
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