［アラフォプログラミング未経験］BEMについて学んだみた - アラフォ〜プログラミング未経験会社員のエンジニアへの道

カリキュラムにて、課題の実装が何とか形になりました。

内容を確認中の間に「BEM」の復習に行ってみます！

BEMって何？
BEMを使用するメリット

BEMって何？

BEMとは、多くの開発者が取り入れているCSS設計です。
BEMは、厳格なクラスの命名規則が特徴です。
BEMはBlock、Element、Modifierの頭文字を取ったもので、
ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。
~カリキュラムより抜粋

「ベム」・・・で良いのかな？　読み方は。。。

CSS設計

CSS設計は、CSSを記述する時のルールです。

CSSを書くときのルールなのか・・・

わかりやすいと良いが。。。

BEMを使用するメリット

BEMには以下のメリットがあります。

クラスの命名が簡単になる

CSS設計において、命名規則が最も難しいとされています。
BEMでは、ページを構成する要素をBlock、Element、Modifierの3つに分類して考えます。
Block、Element、Modifierのみでクラスを命名することで、クラス名に悩むことがなくなります。

要素の再利用がしやすくなる

共通の要素を別の場所で再利用しようとしても、
要素がHTMLに依存していると同じCSSを2つ書かなければなりませんでした。

しかし、BEMを使用することで、クラスの命名がHTML構造に依存しなくなります。
HTML構造に依存しないことで、要素の再利用がしやすくなります。

Block、Element、Modifierについて

先ほど少し触れましたが、BEMではページを構成する要素を
Block、Element、Modiferの3つに分類し、
組み合わせることでクラスをを命名します。
Block、Element、Modiferの3つを使用して命名することで、
クラス名だけでHTML要素の意味を伝えられます。
〜カリキュラムより抜粋〜

クラスの命名が簡単になるのは良いなぁ。

「はて、このクラス名を何しよう？」

とか考えているとすぐに数分経っちゃうし、

ルールが決まっていた方が確かに楽だね！

さっきから何度も出てきたBlockとかがそろそろ知りたいな。

まずは各要素の意味を見ていきますか。

Block

Blockとは、ある要素の大元となるブロック要素です。
Blockの命名には名詞を使用します。
次に説明するElementやModifierは、このBlockを起点に命名されます。

Element

Elementとは、Blockに属する子要素です。
1つ以上のElementによって、Blockは構成されています。
Elementの命名には名詞を使用します。

Modifier

Modifierとは、Blockまたは、Elementに特別な修飾をする要素です。
Modifierの命名には形容詞を使用します。
〜カリキュラムより抜粋〜

当然、それぞれが意味があっての名前なんだな

ってのがわかったかな。

それで、それで？

命名規則について

Block、Element、Modifierを使ってどのように命名するかを学習しましょう。
BEMの命名規則は以下の2つです。

BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ

Modifierにつなぐ場合は、ハイフン2つでつなぐ

〜カリキュラムより抜粋〜

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を記述しました。

sample.scss

.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;
             }
        }
}

menuのクラスの中で、ネストにしながら、

BlockとElemetを繋いで、見やすくなってますね。

変化させたい部分をModifierで繋いで修飾していくコードを書くってことか。

なんかわかってきた気がしてきたー！

次は、「Haml」について、勉強してみようー！