Slide 1
Slide 1 text
W E ❤️ C S S
Slide 2
Slide 2 text
B U T…
Slide 3
Slide 3 text
N O VA R I A B L E S
N O M AT H
N O C U S T O M I S AT I O N
Slide 4
Slide 4 text
N O T A
P R O G R A M M I N G L A N G U A G E
Slide 5
Slide 5 text
P R E P R O C E S S O R ?
Slide 6
Slide 6 text
@ *
Slide 7
Slide 7 text
O R G A N I S AT I O N
T H E P R O B L E M I S O U R
Slide 8
Slide 8 text
W H AT S O U L D W E D O ?
Slide 9
Slide 9 text
.Block-element--modifier
Slide 10
Slide 10 text
@ I N C L U D E
@ E X T E N D
Slide 11
Slide 11 text
dev.w3.org/csswg
Slide 12
Slide 12 text
C U S T O M P R O P S ( > VA R S )
:root {
--lineHeight: 3rem
}
p {
margin-bottom: calc(var(--lineHeight * 2));
}
Slide 13
Slide 13 text
C U S T O M M E D I A Q U E R I E S
@custom-media --large-viewport (min-width: 60rem);
@media (--large-viewport) {
/* styles for large viewport */
}
Slide 14
Slide 14 text
C O L O R M A N I P U L AT I O N
body {
background:
gray(255, .4)
linear-gradient(
color(rebeccapurple alpha(50%)),
hwb(0, 20%, 40%),
color(hwb(0, 20%, 40%, .5) lightness(+10%)),
color(#9d9c tint(40%))
)
}
Slide 15
Slide 15 text
• M O R E S E L E C T O R S ,
• M O R E F U N C T I O N S
• A N D N E S T I N G !
A N D M O R E
Slide 16
Slide 16 text
WHAT IF WE COULD GO…
Slide 17
Slide 17 text
F U T U R E S Y N TA X
U S A B L E T O D AY ?
Slide 18
Slide 18 text
@cssnext
Slide 19
Slide 19 text
C S S N E X T F E AT U R E S
A R E C S S S P E C S
Slide 20
Slide 20 text
cssnext.github.io
Slide 21
Slide 21 text
P L U G I N S
G R U N T, G U L P, B L U R P…
Slide 22
Slide 22 text
Give it a try!
@MoOx