##BEM
多くの開発者が取り入れているCSS設計(CSSを記述する時のルール)です。BEMは、厳格なクラスの命名規則が特徴です。BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。
##クラスの命名が簡単になる
Block、Element、Modifierのみでクラスを命名することで、クラス名に悩むことがなくなります。
##要素の再利用がしやすくなる
共通の要素を別の場所で再利用しようとしても、要素がHTMLに依存していると同じCSSを2つ書かなければなりませんでした。しかし、BEMを使用することで、クラスの命名がHTML構造に依存しなくなります。
HTML構造に依存しないことで、要素の再利用がしやすくなります。
##Block
ある要素の大元となるブロック要素です。Blockの命名には名詞を使用します。ElementやModifierは、Blockを起点に命名されます。
##Element
Blockに属する子要素です。1つ以上のElementによって、Blockは構成されています。Elementの命名には名詞を使用します。
##Modifier
Blockまたは、Elementに特別な修飾をする要素です。Modifierの命名には形容詞を使用します。
##命名規則
BlockとElementをつなぐ場合は、アンダースコア2つでつなぎます。
Modifierにつなぐ場合は、ハイフン2つでつなぎます。
【例】

XXXX.html

nav class='HeaderNav'>
  <ul class='Menu'>
    <li class='Menu__list'>TOP</li>
    <li class='Menu__list'>CONTACT</li>
    <li class='Menu__list Menu__list--backBlack'>ABUOT US</li>
    <li class='Menu__list'>SERVICE</li>
   </ul>
</nav>

navはヘッダーのナビゲーションメニューなので、クラス名をHeaderNavとしました。
このようにクラス名の単語数が2つ以上の場合はキャメルケースまたはスネークケースでつなぎます。
ulはheader-navの子要素ですが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をMenuとしました。
liはMenuの子要素なので、クラス名をMenu__listとしました。
liのうちABOUT USだけは背景色を黒くしたいので、クラス名をMenu__list--backBlackとしました。
Modifierはこのように特定の部品を修飾したい時に使用します。
上記に対したSass

XXXX.scss

.Menu {
  list-style: none;
  &__list {
    background-color: #3BD1EC;
    color: #FFF;
    float: left;
    font-size: 30px;
    padding: 2% 1%;
    text-align: center;
    width: 23%;
    &--backBlack {
      background-color: #000;
      color: #3BD1EC;
    }
  }
}

Modifierを使用した部分だけ背景色を黒くできました。