目次
- BEMとは
- BEMの使い方
今回の学習のゴール
- BEMとは何か、何ができるかを知る
- 実際の使い方について知る
1. BEMとは
- Block, Element, Modifierの略語
- 命名規則の１つで、有名なCSS設計思想である
- モジュラーでメンテナンス可能なコードを書くことができるため、再利用性を容易にする
- 規格化された部品（モジュール）を組み合わせて機能を連結させたものをモジュラーという
- CSSセレクタをBlock, Element, Modifierの3つに分けて定義する
- block
- UIパーツの塊で再利用できるもの（コンポーネント）
- Blockの名前はユニークにしパーツごとの独立性を保つようにする
- ex. card
- Element
- Blockの中にのみ存在できる構成要素
- blockとelementは2つのアンダーバーで繋ぐ
- ex. card__title
- Modifier
- BlockやElementを修飾したい場合に使用し、バージョンの違いや一時的な状態などを示す
- 違いが少ないBlockやElementを再利用するために用いる
- card__title--primary
- block
- block__element–modifierがクラス名の基本構造
<div class="block block--modifier"> <!-- modifierはblockにもelementにもつけることができる -->
<span class="block__element block__element--modifier"></span>
</div>
2. BEMの使い方
html
<div class="posts">
<ul>
<li class="posts__item"> 投稿1 </li>
<li class="posts__item posts__item--active"> 投稿2 </li> <!-- modifierがあるクラス名とないクラス名を両方記述する -->
<li class="posts__item"> 投稿3 </li>
<ul>
<div>
scss
.posts {
/* postsのCSSを記述 */
&__item {
/* posts__itemのCSSを記述 */
&--active {
/* posts__item--activeのCSSを記述 */
}
}
}