Use the BEM naming guide to standardize CSS class names across your team's component library
Review Airbnb's Sass ordering and nesting rules to establish code review standards for your project
Fork this guide and adapt it as your own team's internal CSS coding standard reference
| airbnb/css | aheckmann/gm | alibaba/andfix | |
|---|---|---|---|
| Stars | 6,977 | 6,978 | 6,978 |
| Language | — | JavaScript | C++ |
| Setup difficulty | easy | moderate | moderate |
| Complexity | 1/5 | 2/5 | 3/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
This repository contains Airbnb's internal style guide for writing CSS and Sass, the two most common languages used to control how web pages look. CSS is the standard language for describing visual styles, and Sass is an extension that adds features like variables and reusable snippets. The guide documents the formatting rules and naming conventions that Airbnb's engineering team agreed to follow when writing stylesheets. The guide covers basics like how to indent code, when to add spaces, and how to write comments. It also covers more opinionated choices, such as avoiding ID selectors in CSS because they can be difficult to override, and keeping JavaScript-related class names separate from visual styling class names to prevent the two concerns from getting tangled together. A significant portion of the guide explains BEM, a naming convention that stands for Block, Element, Modifier. The idea is to give CSS class names a structured format that makes it clear which parts of a component a style targets and how variations are named. For example, a card component might have a class for the card itself, a class for its title, and a class for a featured variant, each named in a predictable pattern. This approach helps teams maintain consistent, readable stylesheets as a codebase grows. For Sass specifically, the guide recommends using the .scss file format, ordering property declarations before any included mixins, and placing nested selectors at the end. It advises against deep nesting because that makes styles harder to override and read. Note that Airbnb has archived this repository. They no longer maintain it because they stopped using this technology internally. The content remains available for reference, and anyone interested can fork it to continue development.
Airbnb's archived internal style guide for writing CSS and Sass, covering formatting rules, BEM naming conventions, and best practices that helped their team keep stylesheets readable and maintainable as the codebase grew.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.