Tweet
Tweet

Slide 1

Slide 1 text

C S S

Slide 2

Slide 2 text

C S S I S O L D

Slide 3

Slide 3 text

C S S C A N N O T B E C H A N G E D

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

N O VA R I A B L E S

Slide 6

Slide 6 text

N O M AT H N O C U S T O M I S AT I O N

Slide 7

Slide 7 text

MAINTAINING CSS CAN BE PAINFUL

Slide 8

Slide 8 text

S P E C S A R E S L O W

Slide 9

Slide 9 text

P R E P R O C E S S O R ?

Slide 10

Slide 10 text

@ I N C L U D E

Slide 11

Slide 11 text

@ E X T E N D

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

O R G A N I S AT I O N T H E P R O B L E M I S Y O U R

Slide 14

Slide 14 text

W H AT S O U L D W E D O ?

Slide 15

Slide 15 text

.Block-element--modifier

Slide 16

Slide 16 text

VARS ? MATH ? COLOR ?

Slide 17

Slide 17 text

dev.w3.org/csswg

Slide 18

Slide 18 text

WHAT IF WE COULD GO…

Slide 19

Slide 19 text

F U T U R E S Y N TA X U S A B L E T O D AY ?

Slide 20

Slide 20 text

• C U S T O M P R O P S ( > VA R S ) • W I T H C A L C ( ) • C U S T O M M E D I A - Q U E R I E S • L O T S O F C O L O R ( ) S T U F F • M O R E ( N E S T I N G )

Slide 21

Slide 21 text

@ C S S N E X T

Slide 22

Slide 22 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 23

Slide 23 text

$ npm i -g cssnext $ cssnext input.css output.css

Slide 24

Slide 24 text

P L U G I N S G R U N T, G U L P, B L U R P…

Slide 25

Slide 25 text

cssnext.github.io

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Thanks ! @MoOx