Jordan Arentsen blissdev

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

This document has moved!

It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.

	/*
	This method works similarly
	to jQuery's `closest` method.

	```
	$('.foo').closest('.bar')
	```

	Except, instead of returning an
	element, it executes a function.

	/** Async version of Array.prototype.reduce()
	* await reduce(['/foo', '/bar', '/baz'], async (acc, v) => {
	* acc[v] = await (await fetch(v)).json();
	* return acc;
	* }, {});
	*/
	export async function reduce(arr, fn, val, pure) {
	for (let i=0; i<arr.length; i++) {
	let v = await fn(val, arr[i], i, arr);
	if (pure!==false) val = v;

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	// in /src directory

	import {kphToMph} from './convert';

	class Car {
	constructor(speed) {
	this.speed = speed;
	}

	getSpeedInMph() {

	postgres:
	image: postgres:9.4
	volumes:
	- ./init.sql:/docker-entrypoint-initdb.d/init.sql

	// https://github.com/deebloo/rxjs-worker
	var observable = Observable.of([0, 1, 2, 3, 4]);

	observable
	.map(function (data) {
	return data.concat([5, 6, 7, 8, 9]);
	})
	.workerMap(function (data) {
	return data.concat([10,11,12,13,14]);;
	})

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
	<input id="float"/>
	</body>
	</html>

	import React from "react";
	import ReactDOM from "react-dom";

	import configureStore from "./store/configureStore";


	const store = configureStore();


	const rootEl = document.getElementById("root");