Slide 1

Slide 1 text

1 I’M OVER CSS.

Slide 2

Slide 2 text

2 I’M OVER CSS. THERE’S NO SUCH THING AS CSS ARCHITECTURE™. aka

Slide 3

Slide 3 text

3 I’M OVER CSS. THERE’S NO SUCH THING AS CSS ARCHITECTURE™. CLASSNAMES HOLD NO SEMANTIC VALUE. aka aka

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

6

Slide 8

Slide 8 text

6 DOES THIS INVOLVE NEW LIBRARIES?

Slide 9

Slide 9 text

6 YES. GET OVER IT.

Slide 10

Slide 10 text

7 NEW PHONE, WHO DIS?

Slide 11

Slide 11 text

8

Slide 12

Slide 12 text

9

Slide 13

Slide 13 text

10 @VinSpee

Slide 14

Slide 14 text

11 HOUSEKEEPING typeof(thisFont) === ‘code’ Feel free to ask questions as they come up, but I will have time for questions at the end.

Slide 15

Slide 15 text

12 I’M OVER CSS. 1. styling properties ()

Slide 16

Slide 16 text

13 1. styling properties () 2. styling tag names (button) I’M OVER CSS.

Slide 17

Slide 17 text

14 1. styling properties () 2. styling tag names (button) 3. “semantic” class names (.primary-button) I’M OVER CSS.

Slide 18

Slide 18 text

15 1. styling properties () 2. styling tag names (button) 3. “semantic” class names (.primary-button) 4. BEM (.button--primary) I’M OVER CSS.

Slide 19

Slide 19 text

16 I’M SICK OF THIS NONSENSE.

Slide 20

Slide 20 text

17 EVERYONE ELSE IS TOO

Slide 21

Slide 21 text

CSS 18 EVERYONE ELSE IS TOO SLOW AND STEADY DECLINE

Slide 22

Slide 22 text

19 FUNCTIONAL ATOMIC CSS because buzzwords are good for upvotes.

Slide 23

Slide 23 text

20 FUNCTIONAL ATOMIC CSS single-purpose, idempotent*, no side-effects. *EYE-dəm-POH-tənt

Slide 24

Slide 24 text

21 idempotent: unchanged in value following multiplication by itself; THIS IS WHY PEOPLE DON’T LEARN FUNCTIONAL PROGRAMMING.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

23 FUNCTIONAL ATOMIC CSS single-purpose, idempotent*, no side-effects.

Slide 27

Slide 27 text

24 FUNCTIONAL ATOMIC CSS lots of tiny pieces composing a larger vision

Slide 28

Slide 28 text

25 FUNCTIONAL ATOMIC CSS our end result will be css styles, no matter our approach.

Slide 29

Slide 29 text

26 OH WAIT, THIS IS A JAVASCRIPT MEETUP?

Slide 30

Slide 30 text

27 REACT-SHED a css-in-js component that prescribes constraints for setting component style in a functional fashion.

Slide 31

Slide 31 text

28 view = f(props);

Slide 32

Slide 32 text

29 view = f(props); style = f(props);

Slide 33

Slide 33 text

30 view = f(props); style = f(props); view = f(style)(props);

Slide 34

Slide 34 text

31 REACT-SHED yarn add react-shed

Slide 35

Slide 35 text

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, };

Slide 36

Slide 36 text

33 const Tweet = ({ author, authorHandle, avatar, date, tweet, meta: { banner, caption, url, }, replies = 0, retweets = 0, likes = 0, }: TweetComponent) => (
{author} {authorHandle} {avatar} {date} {tweet} {banner} {caption} {url} {replies} {retweets} {likes}
);

Slide 37

Slide 37 text

34 import Shed from 'react-shed'; const Tweet = ({ … }: TweetComponent) => ( {author} {authorHandle} {avatar} {date} {tweet} {banner} {caption} {url} {replies} {retweets} {likes} );

Slide 38

Slide 38 text

35 import Shed from 'react-shed'; const Tweet = ({ … }: TweetComponent) => ( {author} {authorHandle} {avatar} {date} {tweet} {banner} {caption} {url} {replies} {retweets} {likes} );

Slide 39

Slide 39 text

36

Slide 40

Slide 40 text

37

Slide 41

Slide 41 text

38

Slide 42

Slide 42 text

39

Slide 43

Slide 43 text

40

Slide 44

Slide 44 text

41 br="1/2" br="1of2" br="6/12"

Slide 45

Slide 45 text

42

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

44

Slide 48

Slide 48 text

45 THIS IS SUPER GREAT. I LOVE IT SO FAR.

Slide 49

Slide 49 text

46 THIS IS SUPER GREAT. I LOVE IT SO FAR. HOW DOES IT WORK?

Slide 50

Slide 50 text

47 EMOTION.

Slide 51

Slide 51 text

48 EMOTION. “emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime.”

Slide 52

Slide 52 text

49 COOL. I DON’T REALLY CARE THAT MUCH, BUT SHOW ME THE OUTPUT WHILE YOU’RE TALKING ABOUT IT.

Slide 53

Slide 53 text

50
TED Talks

Slide 54

Slide 54 text

51 .css-165nxkk {
 display: inline-block; 
 width: 100%; }

Slide 55

Slide 55 text

52 .css-14ougef { 
 width: 3.5831807999999996rem;
 height: 3.5831807999999996rem;
 overflow: hidden;
 border-radius: 50%; }

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

54 YOUR TURN. FINISH THE TWEET COMPONENT. VINSPEE.ME/TWEET-SHED

Slide 58

Slide 58 text

55 QUESTIONS? [email protected] @vinspee vinspee.me/im-over-css