What should be the standard of class naming in SASS according to BEM? Should class name start with capital letter or small?

Question

What should be the standard of class naming in SASS according to BEM? Should class name start with capital letter or small ?

Answer 1

In general, the class name starts with a small letter. Sass recommends using all lowercase letters with dashes for separation. for example: HTML

<nav class="c-menu c-menu--horizontal">
   <div class="c-menu__item c-menu__item--first">
    <span class="c-menu__link">Link 1</span>
  </div>
  <div class="c-menu__item">
    <span class="c-menu__link">Link 2</span>
  </div>
  <div class="c-menu__item menu__item--last">
    <span class="c-menu__link">Link 3</span>
  </div>
</nav>
SASS with BEM methodolody

.c-menu
  //...

  &__item
    // ..

  &__item--first
    // ..

  &__item--last
    // ..

  &__link
    // ..

.menu--horizontal //... .menu &__item //..

The c from .c-menu stands for component and it's a part of a namespacing technique that is very useful. See here for a nice article on this topic. All in all our HTML and CSS look decent but BEM shines when it's used with Sass.