Airbnb CSS-in-JavaScript Style Guide

A mostly reasonable approach to CSS-in-JavaScript

Table of Contents

  1. Naming
  2. Ordering
  3. Nesting
  4. Inline
  5. Themes

Naming

Ordering

Nesting

Inline

Themes

Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom.


CSS puns adapted from Saijo George.