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