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
Styling Systems in React
Search
Drew Powers
April 26, 2018
Programming
0
44
Styling Systems in React
Why Styled Components are great, and why just using them solves more problems than you’re aware of
Drew Powers
April 26, 2018
Tweet
Share
More Decks by Drew Powers
See All by Drew Powers
Styling in React
dangodev
0
25
Browser Rendering & Performance
dangodev
0
35
Virtual & Augmented Reality
dangodev
0
89
Design of the Web (2017)
dangodev
0
63
The Science of Font Selection
dangodev
2
380
Other Decks in Programming
See All in Programming
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Domain-Driven Transformation
hschwentner
2
1.9k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Bash Introduction
62gerente
610
210k
Code Reviewing Like a Champion
maltzj
521
39k
Optimizing for Happiness
mojombo
376
70k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
STYLING SYSTEMS IN REACT
NEW CLASS, WHO DIS?
None
BEGUN, THE SPECIFICITY WAR HAS
None
WELCOME TO THE CASCADE ✨ ✨
REACT: CSS IN JS CHRISTOPHER “VJEUX” CHEDEAU (NOV 2014)
SMACSS BEM OOCSS
None
BUT WHAT ABOUT REACT?
TRADITIONAL CSS 1. CLASSNAME 2. SASS 3. STYLABLE.IO 4. CSS
BLOCKS CSS-IN-JS 1. STYLED COMPONENTS 2. EMOTION 3. APHRODITE 4. GLAMOROUS 5. STYLETRON 6. CSS MODULES? NEW!
WHY IS CSS-IN-JS GOOD? 1. NO SYNTAX TO MEMORIZE 2.
NAMING IS EASY 3. CSS MAPS 1:1 WITH MARKUP 4. TALKS TO (REACT) STATE 5. SUPPORTS ALL OF CSS (NOW) 6. TESTABLE (JSC, …)
END.