【初心者必見】CSS講座 〜BEMの基本〜
CSS
2022年11月7日
こんにちは、ゆうきです。
本記事は、
「CSSの基本的な書き方は理解しているがもっと効率よく、保守管理しやすいCSS設計をしたい」
という方向けです。
CSSの考え方がアップロードされるので、何も考えずにCSSを書いている方は、読む価値あると思います。
目次
さっそく、みていきましょう。
CSSで意識すること3選【書き方が重要】
下記の項目を意識してCSSを書くと管理しやすいので参考にしてみてください。
- 文字量を減らす
- 書き順を意識する※上から読み込まれ下に書いたものが最終反映されます
- パーツの共通化（例えば、同じボタンがいくつもある場合はdiv構造、classを共通パーツにします。）
CSSを正しく書くメリット
- 軽量化によるページ速度UP
- クラス名から影響範囲が想像でき、拡張しやすい
- 保守管理しやすい
- 複数のメンバーの場合、開発がスムーズ
BEM（ベム）の基本を知ろう
今後、Web制作に携わっていく方は、CSS設計を学ぶべきです。
理由は、下記の通りです。
- 管理しやすく、再編集しやすい
- 複雑な記述にならない
- 無駄な記述をなくせる
- 効率がいい
本記事で紹介するBEM記法の参考にさせていただいた本は、↓こちら↓になります。
CSS設計完全ガイド
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自体、奥が深く他にもたくさんの記述ルールがありますが、まずは基本の書き方が慣れてから手をつけましょう。
