- by Felix Wu (@flxwu)
Felix Wu
@flxwu
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!
CSS in JS - @flxwu
CSS in JS - @flxwu
CSS in JS - @flxwu
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
/* buttons.css */
.button-green {
background: #ffffff
}
/* button.js */
const BUTTON_COLOR = '#ffffff';
CSS in JS - @flxwu
CSS in JS - @flxwu
-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
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