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
54

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

Other Decks in Programming

See All in Programming
All(?) About Point Sets
Avatar for hole hole
0
210
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
ソフトウェア設計の課題・原則・実践技法
Avatar for 増田 亨 masuda220
PRO
21
16k
Building AI Agents with TypeScript #TSKaigiHokuriku
Avatar for izumin5210 izumin5210
5
990
Eloquentを使ってどこまでコードの治安を保てるのか？を新人が考察してみた
Avatar for ito_kohhh itokoh0405
0
3.2k
Vueで学ぶデータ構造入門 リンクリストとキューでリアクティビティを捉える / Vue Data Structures: Linked Lists and Queues for Reactivity
Avatar for konkarin konkarin
1
340
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
200
Level up your Gemini CLI - D&D Style!
Avatar for Riccardo Carlesso palladius
1
110
「正規表現をつくる」をつくる / make "make regex"
Avatar for TSUYUSATO Kitsune makenowjust
1
730
チーム開発の “地ならし"
Avatar for konifar konifar
8
5.9k
Querying Design System デザインシステムの意思決定を支える構造検索
Avatar for ikuma-t ikumatadokoro
1
1.2k
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
300

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
970
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k

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.