Styling in React

Transcript

1. 5 TIPS FOR STYLING IN REACT 1 2 3 4 5
2. AVOID NESTED SELECTORS 1 2 3 4 5
4. BEGUN, THE SPECIFICITY WAR HAS
5. KEEP LAYOUT WITHIN COMPONENTS 1 2 3 4 5
9. AVOID MAGIC NUMBERS 1 2 3 4 5
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
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
27. “RESPONSIVE TYPE SCALE”
28. THANKS! 1 2 3 4 5 @_DREWPOWERS