CSS in JS - The Future of component-based Styling?

- by Felix Wu (@flxwu)

Felix Wu

@flxwu

AGENDA

  • A brief history of the CSS-in-JS "movement"
  • Concept and Thoughts behind CSS-In-JS
  • Demo and Examples
  • CSS inconveniences and flaws that JavaScript solve
CSS in JS - @flxwu
slides.com/flxwu/css-in-js
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu
document.tags.H1.fontSize = "20pt";
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu

This is a very thought-provoking talk that attempts to show that CSS has fundamental flaws and writing styling in JS solves most of the problem without even trying.

CSS in JS - @flxwu
CSS in JS - @flxwu
Demo Time!
github.com/flxwu/css-in-js
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu
/* img.css */

.img {
    ...
}

.img-flavored {
    ...
}

Globals!

1. Global Namespace

CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu

2. Dependencies

CSS in JS - @flxwu
/* buttons.css */ 

.button-green {
    ...
}

.button-blue {
    ...
}

.button-red {
    ...
}
/* about-page.css */ 

.about-header {
    ...
}

.about-footer {
    ...
}
CSS in JS - @flxwu
@vjeux
CSS in JS - @flxwu
CSS in JS - @flxwu

Code Sharing

/* buttons.css */ 

.button-green {
    background: #ffffff   
}
/* button.js */ 

const BUTTON_COLOR = '#ffffff';
CSS in JS - @flxwu

Unit Testing

CSS in JS - @flxwu

Vendor Prefixing

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 
CSS in JS - @flxwu

Why not?

CSS in JS - @flxwu
CSS in JS - @flxwu
const styles = {
    text: {
        backgroundColor: 'blue',
        fontSize: 15,
    }
}    
CSS in JS - @flxwu
Felix Wu (@flxwu)
github.com/flxwu/css-in-js