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

1

There are 1 best solutions below

0
On

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.