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
80
CSS Modules
Think local, start compose!
Daniele Bertella
July 27, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
340
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
230
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
380
本当のAWS基礎
toru_kubota
0
520
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
MapLibreとAmazon Location Service
dayjournal
1
160
ServiceNow Knowledge Learning Rise up
manarobot
0
210
JAWS-UG Bedrock Claude Night
yamahiro
3
610
Databricks における 『MLOps』
databricksjapan
2
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Practical Orchestrator
shlominoach
182
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
How to name files
jennybc
65
93k
Ruby is Unlike a Banana
tanoku
96
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Bash Introduction
62gerente
604
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
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