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

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

By Felix Wu

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

You probably already heard the term "CSS-in-JS". Maybe you just ignored it, or you thought "Well, I am perfectly fine with writing regular CSS". Why is it a thing then? Because it solves a lot of problems that you might stumble upon while writing regular CSS. Writing CSS in JavaScript is not a guaranteed productivity-boost, but without knowing the concept and the reasons behind it you might be missing out a whole new perspective on CSS. In this talk, I am going to show what writing CSS through JavaScript means, which problems it solves, and also showcase it in a live demo.

  • 1,313