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

Styling Systems in React

Avatar for Drew Powers Drew Powers
April 26, 2018
Programming
0
52

Styling Systems in React

Why Styled Components are great, and why just using them solves more problems than you’re aware of
Avatar for Drew Powers

Drew Powers

April 26, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
26
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
43
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
96
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
66
The Science of Font Selection
Avatar for Drew Powers dangodev
2
450

Other Decks in Programming

See All in Programming
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
940
A comprehensive view of refactoring
Avatar for Marabesi marabesi
0
970
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
2
640
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
430
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
280
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
Avatar for Naoya Ito naoya
17
4.8k
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
240
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
500
KotlinConf 2025 現地で感じたServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
220
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
180
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
5
1.4k
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
200

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k

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.