Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styling Systems in React

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

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

  1. STYLING SYSTEMS IN REACT

  2. NEW CLASS, WHO DIS?

  3. None

  4. BEGUN, THE SPECIFICITY WAR HAS

  5. None

  6. WELCOME TO THE CASCADE ✨ ✨

  7. REACT: CSS IN JS CHRISTOPHER “VJEUX” CHEDEAU (NOV 2014)

  8. SMACSS BEM OOCSS

  9. None

  10. BUT WHAT ABOUT REACT?

  11. 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!

  12. 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, …)

  13. END.