Thomas Roch troch

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

Christopher Chedeaux, 2015, "CSS in JS" https://speakerdeck.com/vjeux/react-css-in-js
Mark Dagleish, 2015, "The case for CSS modules" https://www.youtube.com/watch?v=zR1lOuyQEt8

Keybase proof

I hereby claim:

I am troch on github.
I am troch (https://keybase.io/troch) on keybase.
I have a public key ASCLBbY7TIbTw4SEMCqCuQ93mL86r6PQAaDmQGXBbH3YiQo

To claim this, I am signing this object:

	{
	"always_prompt_for_file_reload": false,
	"color_scheme": "Packages/itg.flat/itg.Monokai.tmTheme",
	"draw_white_space": "all",
	"ensure_newline_at_eof_on_save": true,
	"font_options":
	[
	"subpixel_antialias"
	],
	"font_size": 10,

	{
	// Parser
	"parser": "babel-eslint",
	// ECMA Features
	"ecmaFeatures": {
	"arrowFunctions": true,
	"blockBindings": true,
	"classes": true,
	"defaultParams": true,
	"destructuring": true,

	import element from 'virtual-element';
	import { bindActionCreators } from 'redux';
	import shallowEquals from 'is-equal-shallow';
	import isPlainObject from 'is-plain-object';

	const defaultMapStateToProps = () => ({})
	const defaultMapDispatchToProps = dispatch => ({ dispatch })
	const defaultMergeProps = (stateProps, dispatchProps, parentProps) => ({
	...parentProps,
	...stateProps,

	// require() some stuff from npm (like you were using browserify)
	// and then hit Run Code to run it on the right

	var element = require('virtual-element');
	var deku = require('deku');
	var timer = require('deku-timer').default;

	function render(component) {
	var props = component.props;
	return element('div', {}, 'Started ' + props.tick * props.delay + 'ms ago.');