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
49
0

Styling in React

Avatar for Drew Powers

Drew Powers

June 21, 2018

More Decks by Drew Powers

See All by Drew Powers
Styling Systems in React
Avatar for Drew Powers dangodev
0
65
Browser Rendering & Performance
Avatar for Drew Powers dangodev
0
55
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
120
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
93
The Science of Font Selection
Avatar for Drew Powers dangodev
2
500

Other Decks in Technology

See All in Technology
オブザーバビリティ、本当に活用できてる？ 〜API連携×生成AIで成熟度を自動評価〜
Avatar for dmmsre dmmsre
1
3.6k
ヘルスケア領域における AI 活用と その安全性担保のための取り組み (Leveraging AI in Healthcare and Our Efforts to Ensure Its Safety) - Google I/O Extended Tokyo 2026, July 11, 2026
Avatar for Akira Tameoka zettaittenani
0
430
【Claude Code】鹿野さんに聞く 私の推しの並行開発環境 大公開 / claude-code-parallel-2026-07-15
Avatar for tonkotsuboy_com tonkotsuboy_com
12
8.7k
CSに"SLO"は要らない、経営層に"99.9%"は伝わらない - SREを全社に"翻訳"する3原則
Avatar for サイバーセキュリティクラウド cscengineer
PRO
1
5.2k
10年目を迎えた「ABEMA」がどのように AI 活用を推進して、AI 駆動開発にシフトしているのか / How ABEMA, entering its 10th year, is promoting the use of AI and shifting toward AI-driven development
Avatar for Yusei Yamanaka miyukki
0
290
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
430
AI x 開発生産性を取り巻く予算戦略と投資対効果
Avatar for Masato Ishigaki / 石垣雅人 i35_267
1
150
LLM/Agent評価：トップ営業の発言を「正解」にする 〜暗黙的正解による評価を営業資産に変える〜
Avatar for Hirotaka takkuhiro
1
230
“それは自分の仕事じゃない"を 越えて行け
Avatar for yuukiyo yuukiyo
1
490
「AIに依存している」と 「AIを使いこなしている」の違い
Avatar for Kensuke Yasuma k8yasuma
0
120
実践！既存 Project への AI-Driven Development 適用〜 一ヶ月で Project 唯一のフロントエンドエンジニアを作り出せ〜
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
240
AI時代の闇と光
Avatar for tatsuya1970 tatsuya1970
0
110

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
400
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
510
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.6k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
360
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
160

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