I'm over CSS: Function Atomic CSS for the Masses

Simplify your build process and increase portability by incorporating a CSS-in-JS solution. Take it further and apply functional concepts to your styles, eliminating the need to ever write CSS again.

Transcript

1. 1 I’M OVER CSS.
2. 2 I’M OVER CSS. THERE’S NO SUCH THING AS CSS ARCHITECTURE™. aka
3. 3 I’M OVER CSS. THERE’S NO SUCH THING AS CSS ARCHITECTURE™. CLASSNAMES HOLD NO SEMANTIC VALUE. aka aka
4. 4 I’M OVER CSS. THERE’S NO SUCH THING AS CSS ARCHITECTURE™. CLASSNAMES HOLD NO SEMANTIC VALUE. YOU HAVE BEEN WAY OVERTHINKING IT THIS WHOLE TIME. aka aka aka
8. 6 DOES THIS INVOLVE NEW LIBRARIES?
9. 6 YES. GET OVER IT.
10. 7 NEW PHONE, WHO DIS?
13. 10 @VinSpee
14. 11 HOUSEKEEPING typeof(thisFont) === ‘code’ Feel free to ask questions as they come up, but I will have time for questions at the end.
15. 12 I’M OVER CSS. 1. styling properties (<button color="red">)
16. 13 1. styling properties (<button color="red">) 2. styling tag names (button) I’M OVER CSS.
17. 14 1. styling properties (<button color="red">) 2. styling tag names (button) 3. “semantic” class names (.primary-button) I’M OVER CSS.
18. 15 1. styling properties (<button color="red">) 2. styling tag names (button) 3. “semantic” class names (.primary-button) 4. BEM (.button--primary) I’M OVER CSS.
19. 16 I’M SICK OF THIS NONSENSE.
20. 17 EVERYONE ELSE IS TOO
21. CSS 18 EVERYONE ELSE IS TOO SLOW AND STEADY DECLINE
22. 19 FUNCTIONAL ATOMIC CSS because buzzwords are good for upvotes.
23. 20 FUNCTIONAL ATOMIC CSS single-purpose, idempotent*, no side-effects. *EYE-dəm-POH-tənt
24. 21 idempotent: unchanged in value following multiplication by itself; THIS IS WHY PEOPLE DON’T LEARN FUNCTIONAL PROGRAMMING.
25. 22 idempotent: unchanged in value following multiplication by itself. idempotent: the same input will result in the same output every time. THIS IS WHY PEOPLE DON’T LEARN FUNCTIONAL PROGRAMMING.
26. 23 FUNCTIONAL ATOMIC CSS single-purpose, idempotent*, no side-effects.
27. 24 FUNCTIONAL ATOMIC CSS lots of tiny pieces composing a larger vision
28. 25 FUNCTIONAL ATOMIC CSS our end result will be css styles, no matter our approach.
29. 26 OH WAIT, THIS IS A JAVASCRIPT MEETUP?
30. 27 REACT-SHED a css-in-js component that prescribes constraints for setting component style in a functional fashion.
31. 28 view = f(props);
32. 29 view = f(props); style = f(props);
33. 30 view = f(props); style = f(props); view = f(style)(props);
34. 31 REACT-SHED yarn add react-shed
35. 32 type TweetComponent = { author: string, authorHandle: string, avatar: string, date: string, tweet: string, meta?: { banner?: string, caption: string, url: string, }, replies: number, retweets: number, likes: number, };
36. 33 const Tweet = ({ author, authorHandle, avatar, date, tweet, meta: { banner, caption, url, }, replies = 0, retweets = 0, likes = 0, }: TweetComponent) => ( <div> {author} {authorHandle} {avatar} {date} {tweet} {banner} {caption} {url} {replies} {retweets} {likes} </div> );
37. 34 import Shed from 'react-shed'; const Tweet = ({ … }: TweetComponent) => ( <Shed component="div"> {author} {authorHandle} {avatar} {date} {tweet} {banner} {caption} {url} {replies} {retweets} {likes} </Shed> );
38. 35 import Shed from 'react-shed'; const Tweet = ({ … }: TweetComponent) => ( <div.shed> {author} {authorHandle} {avatar} {date} {tweet} {banner} {caption} {url} {replies} {retweets} {likes} </div.shed> );
39. 36 <img.shed d="i-b" w="full" src={avatar} alt={author} />
40. 37 <img.shed d="i-b" // display: inline-block; w="full" src={avatar} alt={author} />
41. 38 <img.shed d="i-b" // display: inline-block; w="full" // width: 100%; src={avatar} alt={author} />
42. 39 <div.shed br="1/2" w="8" h="8" o="h" > <img.shed … /> </div.shed>
43. 40 <div.shed br="1/2" // border-radius: 50%; w="8" h="8" o="h" > <img.shed … /> </div.shed>
44. 41 br="1/2" br="1of2" br="6/12"
45. 42 <div.shed br="1/2" // border-radius: 50%; w="8" // width: scale(8); h="8" // height: scale(8); o="h" > <img.shed … /> </div.shed>
46. 43 scale(8)? scale(8): 11.302rem scale(7): 7.993rem scale(6): 5.653rem scale(5): 3.998rem scale(4): 2.827rem scale(3): 1.999rem scale(2): 1.414rem scale(1): 1rem scale(0): 0 scale(.1): 0.707rem scale(.2): 0.5rem scale(.3): 0.354rem
47. 44 <div.shed br="1/2" // border-radius: 50%; w="8" // width: scale(8); h="8" // height: scale(8); o="h" // overflow: hidden; > <img.shed … /> </div.shed>
48. 45 THIS IS SUPER GREAT. I LOVE IT SO FAR.
49. 46 THIS IS SUPER GREAT. I LOVE IT SO FAR. HOW DOES IT WORK?
50. 47 EMOTION.
51. 48 EMOTION. “emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime.”
52. 49 COOL. I DON’T REALLY CARE THAT MUCH, BUT SHOW ME THE OUTPUT WHILE YOU’RE TALKING ABOUT IT.
53. 50 <div class="css-14ougef"> <img src="…" alt="TED Talks" class="css-165nxkk" /> </div>
54. 51 .css-165nxkk {
 display: inline-block; 
 width: 100%; }
55. 52 .css-14ougef { 
 width: 3.5831807999999996rem;
 height: 3.5831807999999996rem;
 overflow: hidden;
 border-radius: 50%; }
56. 53 EMOTION DOES ALL OF THE ANNOYING WORK FOR US – PRECOMPILING, CONDENSING, PSEUDO-SELECTORS, MEDIA QUERIES, OPTIMIZATION, ETC. IT’S MY FAVORITE CSS-IN-JS SOLUTION OUT THERE.
57. 54 YOUR TURN. FINISH THE TWEET COMPONENT. VINSPEE.ME/TWEET-SHED
58. 55 QUESTIONS? v@vinspee.me @vinspee vinspee.me/im-over-css