css naming conventions

css-naming-conventions.md

CSS Naming Conventions

Components

A page module that has a certain purpose and is a wrapper for its children.

Naming components

.component {…}
.component-name {…}

Example:

.search-form {...}

Elements

Elements are things inside your component.

.component__link {…}
.component-name__link-element {…}

Example:

.search-form__field {...}
.search-form__action {...}

Variants

Components may have variants. Elements may have variants, too.

Naming variants

.component--variant {…}
.component-name--variant-modifier {…}

Example:

.search-form--prefixed {...}

Modifiers / State Indicators

Naming variants

A component can be modified via a separate class.

.component.active {…}

Example:

.search-form.active {...}