Tweet
Tweet

Slide 1

Slide 1 text

STYLING SYSTEMS IN REACT

Slide 2

Slide 2 text

NEW CLASS, WHO DIS?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

BEGUN, THE SPECIFICITY WAR HAS

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WELCOME TO THE CASCADE ✨ ✨

Slide 7

Slide 7 text

REACT: CSS IN JS CHRISTOPHER “VJEUX” CHEDEAU (NOV 2014)

Slide 8

Slide 8 text

SMACSS BEM OOCSS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

BUT WHAT ABOUT REACT?

Slide 11

Slide 11 text

TRADITIONAL CSS 1. CLASSNAME 2. SASS 3. STYLABLE.IO 4. CSS BLOCKS CSS-IN-JS 1. STYLED COMPONENTS 2. EMOTION 3. APHRODITE 4. GLAMOROUS 5. STYLETRON 6. CSS MODULES? NEW!

Slide 12

Slide 12 text

WHY IS CSS-IN-JS GOOD? 1. NO SYNTAX TO MEMORIZE 2. NAMING IS EASY 3. CSS MAPS 1:1 WITH MARKUP 4. TALKS TO (REACT) STATE 5. SUPPORTS ALL OF CSS (NOW) 6. TESTABLE (JSC, …)

Slide 13

Slide 13 text

END.