【BEM】HTMLのクラス名を簡単につける

https://chkc.hatenablog.com/entry/2019/08/10/124430

Sassについて書いた記事の続き。

BEMとは命名規則のことで、ページを構成する要素をBlock、Element、Modifierの３つに分類して考える。

BEMを使えば、HTMLを書くときにクラス名をどうするか悩まずに、マークアップのスピードが上がる。（CSS設計のルール決め的な）

BEMに関してのわかりやすい記事

https://app.codegrid.net/entry/bem-basic-1

https://mae.chab.in/archives/2553

　ルールは２つ

・blockとelementをつなぐときは、__アンダースコア２つ使う

・modifierにつなぐときは、 --ハイフン２つ使う

例）sample.html

<nav class='header-nav'>
  <ul class='menu'>
    <li class='menu__list'>TOP</li>
    <li class='menu__list'>CONTACT</li>
    <li class='menu__list menu__list--back-black'>ABUOT US</li>
    <li class='menu__list'>SERVICE</li>
   </ul>
</nav>

①navはヘッダーのナビゲーションメニューなので、クラス名をheader-navとしました。このようにクラス名の単語数が2つ以上の場合はハイフン1つでつなぐ。

②ulはheader-navの子要素ですが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をmenuとする。

③liはmenuの子要素なので、クラス名をmenu__listにします。
liのうちABOUT USだけは背景色を黒くしたいので、クラス名をmenu__list--back-blackとしました。
Modifierはこのように特定の部品を修飾したい時に使用する。

このhtmlに対して、以下のようにSassを記述

&（アンパサント）で、親セレクタを参照にしている

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

次回、hamlの書き方について

https://chkc.hatenablog.com/entry/2019/08/10/131548