CSS Naming Conventions

README.md

CSS Naming Convention

BEM

Button Example

Block:

.button {}

Element:

.button__label {}

Modifer:

.button--large {}

Extending BEM: Namespaces

Object Type: .o-[name]

.o-button {}

Component Type: .c-[name]

.c-gallery {}

Theme Type: .th-[name]

.th-dark {}

Utility Type: .u-[name]

.u-text-caps {}

Javascript Hook: .js-[name]

.js-gallery {}

Testing Hook: .ts-[name] / .qa-[name]

.ts-gallery {}

Is/Has States: .is-[name] / .has-[name]

.is-selected {}
.has-added {}

Further Resources: https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/