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
53

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
30
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
45
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
99
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
69
The Science of Font Selection
Avatar for Drew Powers dangodev
2
480

Other Decks in Programming

See All in Programming
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
Avatar for Itaru Ota ota1022
0
240
Playwrightはどのようにクロスブラウザをサポートしているのか
Avatar for nus3 yotahada3
7
2.3k
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
180
CSC305 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
260
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
Avatar for Takashi uhucream
0
110
ソフトウェア設計の実践的な考え方
Avatar for 増田 亨 masuda220
PRO
3
480
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
Pythonスレッドとは結局何なのか？ CPython実装から見るNoGIL時代の変化
Avatar for curekoshimizu curekoshimizu
4
1.3k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
Avatar for Marco Roth marcoroth
3
920
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
Avatar for Koya Masuda koxya
1
1.1k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
Avatar for ukitaka ukitaka
0
390
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
Avatar for Yunosuke Sakai ski
0
350

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k

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.