Naming with UX in mind The following examples are based on an post I read a while back here.

The common BEM convention

  .Block {}
.Block__element {}
.Block--modifier {}
.Block__element--modifier {}

The simplier BEM notation

  .Block {}
.Block-element {}
.Block--elementModifier {}
.Block-elementName--elementModifier {}

Note the camelCase on all element and modifier names. Block names use the UpperCamelCase style.

Prefixes for utilities

Prefixes for JS hooks

  .js-Block {}
.js-Block--elementModifier {}

App prefixes for style utilities to prevent collision with outside styles.

  .org-Block {}
.org-Block-elementName {}
.org-Block--elementModifier {}

2,125 0 26