MENU

Class Naming

Hyphenation is preferred over the camel case when naming class names because a hyphenated name is consistent with the naming style of the property names. Moreover, you will be able to utilize the |= attribute selector for hyphenated values.

The BEM (block-element-modifier) system, which uses double hyphens and double underscores, has been proposed in the naming of classes:

<div class="block block—mod1">
   <div class="block block__elem1">1</div>
   <div class="block block__elem2">2</div>
   <div class="block block__elem3--mod2">3</div>
</div>

<div class="block block—mod1">
   <div class="block block__elem1">1</div>
   <div class="block block__elem2">2</div>
   <div class="block block__elem3--mod2">3</div>
</div>