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

Styling in React

Avatar for Drew Powers Drew Powers
June 21, 2018
Technology
0
30

Styling in React

Avatar for Drew Powers

Drew Powers

June 21, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling Systems in React
Avatar for Drew Powers dangodev
0
53
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 Technology

See All in Technology
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
120
PLaMoの事後学習を支える技術 / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
9
3.8k
「Verify with Wallet API」を アプリに導入するために
Avatar for hinakko hinakko
1
240
Where will it converge?
Avatar for Ibukun Adedeji ibknadedeji
0
180
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
Avatar for ZOZO Developers zozotech
PRO
0
180
Green Tea Garbage Collector の今
Avatar for zchee zchee
PRO
2
390
GA technologiesでのAI-Readyの取り組み@DataOps Night
Avatar for yuto16 yuto16
0
270
非エンジニアのあなたもできる＆もうやってる！コンテキストエンジニアリング
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
3
910
JAZUG 15周年記念 × JAT「AI Agent開発者必見："今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
Avatar for KoheiOgawa shisyu_gaku
0
110
いま注目しているデータエンジニアリングの論点
Avatar for Ikki Miyazaki ikkimiyazaki
0
590
20250929_QaaS_vol20
Avatar for Shin Murakami mura_shin
0
110
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを 習慣化できた話
Avatar for リリカル mhlyc
0
130

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
45
2.5k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
5
190
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
114
20k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
19
1.2k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

Transcript

  1. 5 TIPS FOR STYLING IN REACT 1 2 3 4

    5

  2. AVOID NESTED SELECTORS 1 2 3 4 5

  3. None

  4. BEGUN, THE SPECIFICITY WAR HAS

  5. KEEP LAYOUT WITHIN COMPONENTS 1 2 3 4 5

  6. None
  7. None
  8. None

  9. AVOID MAGIC NUMBERS 1 2 3 4 5

  10. None
  11. None

  12. MAKE BREAKPOINTS WHEN IT LOOKS WEIRD (DON’T MANAGE GLOBAL BREAKPOINTS)

    1 2 3 4 5

  13. 635 PX t HOME SHOP GALLERY ABOUT CONTACT 600 PX

    / 900 PX / 1200 PX / 1800 PX THE 100% CORRECT WAY TO DO CSS BREAKPOINTS

  14. DON’T
 EXTEND
 STYLES 1 2 3 4 5 (PLEASE REPEAT

    YOURSELF)

  15. SASS STYLED COMPONENTS

  16. COINCIDENCE

  17. None

  18. LEARN
 SIBLING SELECTORS 1 2 3 4 5 6 7

    8

  19. REACT • ONCLICK • HANDLE TAB KEY • HANDLE SPACE

    BAR • HANDLE ACCESSIBILITY CSS

  20. + > ~ * [ ]

  21. USE BETTER EASINGS 1 2 3 4 5 6 7

    8

  22. linear transition-timing-function border-color box-shadow color opacity transform: rotate cubic-bezier() transform:

    scale translate MATERIAL.IO / DESIGN / MOTION / SPEED.HTML#EASING animation-timing-function

  23. USE A
 RESPONSIVE TYPE SCALE 1 2 3 4 5

    6 7 8

  24. 8 10 12 14 16 20 24 28 36 48

  25. None
  26. None

  27. “RESPONSIVE TYPE SCALE”

  28. THANKS! 1 2 3 4 5 @_DREWPOWERS