【初心者必見】CSS講座 〜BEMの基本〜

CSS

2022年11月7日

【初心者必見】CSS講座 〜実践編〜【BEMの基本】

こんにちは、ゆうきです。

本記事は、

「CSSの基本的な書き方は理解しているがもっと効率よく、保守管理しやすいCSS設計をしたい」

という方向けです。

CSSの考え方がアップロードされるので、何も考えずにCSSを書いている方は、読む価値あると思います。

目次

さっそく、みていきましょう。

CSSで意識すること3選【書き方が重要】

post_sub26

下記の項目を意識してCSSを書くと管理しやすいので参考にしてみてください。

  • 文字量を減らす
  • 書き順を意識する※上から読み込まれ下に書いたものが最終反映されます
  • パーツの共通化(例えば、同じボタンがいくつもある場合はdiv構造、classを共通パーツにします。)

CSSを正しく書くメリット

  • 軽量化によるページ速度UP
  • クラス名から影響範囲が想像でき、拡張しやすい
  • 保守管理しやすい
  • 複数のメンバーの場合、開発がスムーズ

BEM(ベム)の基本を知ろう

post_sub27

今後、Web制作に携わっていく方は、CSS設計を学ぶべきです。

理由は、下記の通りです。

  • 管理しやすく、再編集しやすい
  • 複雑な記述にならない
  • 無駄な記述をなくせる
  • 効率がいい

本記事で紹介するBEM記法の参考にさせていただいた本は、↓こちら↓になります。

CSS設計完全ガイド

BEM以外のさまざまなCSS設計手法を紹介されているので、Web系エンジニアやWebデザイナーは必読の1冊です。

今回は、BEMの基本的な書き方まで紹介しますので、もっと詳しく知りたい方は公式ドキュメントをお読みください。。

  • B・・・Block
  • E・・・Element
  • M・・・Modifier

書き方は、下記の感じです。

                    
.block__element—modifer {
// スタイル指定
}

Blockの基本

Blockは、「どこでも使い回せる」1つのパーツのことです。

具体的には、1つの役割を持ったパーツなので、Block自体に周りに影響を及ぼすスタイルを指定してはけません。

例えば、width、positon、float、marginなど

Blockの命名規則

単語が1つの場合

例)header

単語が複数の場合

例)global-nav

Elementの基本

Elementは、Block内のパーツになります。

具体的には、Blockの中身の各パーツなので、Blockの外で独立して使ってはいけません。

Elementの命名規則

単語が1つの場合

例)header__logo

単語が複数の場合

例)global-nav__link-item

Elementの入れ子

Elementの中に、Elementが入れ子になっているのはOKですが、命名を入れ子にしてはいけません。

                        
<ul class="menu">

  <li class="menu__item">
   <a href="#" class="menu__item__link">リスト1</a>
  </li>

  <li class="menu__item">
   <a href="#" class="menu__link">リスト2</a>
  </li>
</ul>
                        
                      

スタイル指定の書き方は、下記を心がけましょう。

                        
.menu {
// スタイル指定
}
.menu__item {
// スタイル指定
}
.menu_link {
// スタイル指定
}

Modifierの基本

Modifierは、見た目や状態、振る舞いのことです。
必ずしも必要ではありません。

具体的には、BlockとElementはクラス名に「それが何であるか」を命名していたのに対し、 Modifierは、「それがどうであるか」で命名します。

例えば、色に関して「見た目」ではなく「どのような意味」なのかで命名をします。
また、Modifierは、BlockかElementのクラス名がある状態で、2つ目以降のクラス名として使用するルールです。

Blockの命名規則

例)item list__item–caution

                    
<div class="list">
  <a href="#" class="item list__item--caution">
   警告
  </a>
</div>
                    
                  
                    
.list__item--caution {
color: red;
}

というわけで、ざっくりBEMの基本的な書き方を紹介しました。
BEM自体、奥が深く他にもたくさんの記述ルールがありますが、まずは基本の書き方が慣れてから手をつけましょう。

本記事と一緒に読みたい記事

関連記事