CSSの設計方法をまとめてみた~BEM編~
BEMについて、簡単にまとめる。
詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。
bem-methodology-ja/index.md at master · juno/bem-methodology-ja
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMとは
Block、Element、Modifierの略。
DOMを構成する各要素をBlock、Element、Modifierのどれかに当てはめて命名する。
正直なところCSSのclass名は冗長になるので最初は冗長に感じるかもしれないが、がっつり命名規則が決まるので段々と楽に感じてくるかもしれない。
BEMのメリット
BEMの公式ドキュメントでは、以下の問題を解決するとしている。
なお、以下の英語の部分はBEMの公式ドキュメントから引用しているものである。
BEM PROVIDES THE SAME RULES TO ACHIEVE CODE CONSISTENCY
【意訳】
BEMはコードの一貫性を獲得するための同一ルールを提供する。
Common approach for all technologies: HTML, CSS, JavaScript, docs, tests, etc.
【意訳】
HTML, CSS, JavaScript, docs, testsなどのあらゆる技術に対しての共通のアプローチである。
GROW AND SCALE YOUR CODEBASE
【意訳】
(コードベースが)育ち、あなたのコードベースをスケールさせる
Most projects use the same components. Code reuse significantly reduces price and time of development.
【意訳】
大半のプロジェクトは、同じコンポーネーネント(部品や構成要素)を使用する。
コードの再利用によって、開発のコストと開発にかかる時間が著しく減少する。
INCREASE PRODUCTIVITY
【意訳】
生産性を上げる。
Simplicity of updates and scalability increases productivity.
【意訳】
アップデートと拡大の容易さは、生産性を上げる。
TEAM WORK
【意訳】
チームワーク
Common terminology provides ability for developers to rapidly switch projects — everything is familiar.
【意訳】
共通した専門用語は、開発者がプロジェクトに(新規に)加わるのにやくに立つ。
DO LESS, GET MORE
【意訳】
することは少ないが、得るものは多い。
Common rules help to automate process. Code may be partially autogenerated.
【意訳】
共通のルールによって、プロセスを自動化が促進される。
コードが部分的に自動生成されるようになるかもしれない。
SUITABLE FOR ANY PROGRAMMING LANGUAGE OR ANY FRAMEWORK
【意訳】
あらゆるプログラミン言語及びフレームワークに適している。
Methodology provides language agnostic practices to increase code reliability and reuse.
【意訳】方法論は、言語にとらわれないコードの確実性と再利用を促進する習慣を提供する。
EASY TO LEARN
【意訳】
学習しやすい。
You can read all the methodology during your morning coffee.
【意訳】
朝コーヒーを飲んでいる間に全ての方法論を読める(くらいに学習が容易だ)。
PROMOTE REUSE
【意訳】
再利用を促進する。
Code grows following predefined rules.
【意訳】
あらかじめ定義されたルールに基づいて、コードが成長していく。
BEMのデメリット
class名が冗長になる。
Block、Element、Modifierの各説明
Block
アプリケーションやWEBサイトを構成する塊。
ページを構成する大きめの部品だと考えれば良いと思う。
ブロックは、自身の中に別のブロックを含む場合がある。
パソコンで例えると、画面やキーボード(一個一個ではなくて各ボタンの集合として)、トラックパッドなど。
Element
Blockの中に存在し、Blockを構成するための各要素だと考えれば良い。
パソコンで例えると、画面のベセルだったり、キーボードの中の各ボタン(AとかEnterなど)など。
Modifier
BlockやElementの中で、状態やレイアウトが変化するプロパティ(性質)。
名前と値のセットである。
記述方法
Block__Element--Modifier(name)Modifier(value)と言う形で記述する。(Block_(アンダースコア2つ)--Element(ハイフン2つ)Modifierの名前部分_(アンダースコア1つ)Modifierの名前部分)。
Block、Element、Modifier共に、名称が複数の単語から構成される場合は、 hoge-foo のような具合でハイフン1つでつなぐ。
SCSSと一緒に使う
SCSSの & とBEMはすごく相性が良いようだ。
& は、ブロックの親セレクタを参照する。
参考
BEMをSassで快適に書く方法 | maesblog
CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG
記述例
実際に、BEMを導入し、SCSSの方式で簡単なサンプルを記述してみる。
HTMLは以下。
<section class="block-A">
<div class="block-B">
<div class="block-B__element-B1 block-B__element-B1--modifier-B1">B1</div>
<div class="block-B__element-B2 block-B__element-B2--modifier-B2">B2</div>
</div>
<div class="block-C">
<div class="block-C__element-C1 block-C__element-C1--modifier-C1">C1</div>
<div class="block-C__element-C2 block-C__element-C2--modifier-C2">C2</div>
</div>
</section>
SCSSは以下。
.block-A {
width: 100%;
padding: 20%;
.block-B {
&__element-B1 {
width: 50%;
background-color: black;
&--modifier-B1 {
color: white;
}
}
&__element-B2 {
width: 50%;
background-color: blue;
&--modifier-B2 {
color: yellow;
}
}
}
.block-C {
&__element-C1 {
width: 50%;
background-color: aquamarine;
&--modifier-C1 {
color: orange;
}
}
&__element-C2 {
width: 50%;
background-color: deeppink;
&--modifier-C2 {
color: green;
}
}
}
}
SCSSを以下のコマンドでコンパイルして生成されたCSSファイルが以下。
コマンド
sass --style expanded bem.scss:bem.css
生成されたcss
.block-A {
width: 100%;
padding: 20%;
}
.block-A .block-B__element-B1 {
width: 50%;
background-color: black;
}
.block-A .block-B__element-B1--modifier-B1 {
color: white;
}
.block-A .block-B__element-B2 {
width: 50%;
background-color: blue;
}
.block-A .block-B__element-B2--modifier-B2 {
color: yellow;
}
.block-A .block-C__element-C1 {
width: 50%;
background-color: aquamarine;
}
.block-A .block-C__element-C1--modifier-C1 {
color: orange;
}
.block-A .block-C__element-C2 {
width: 50%;
background-color: deeppink;
}
.block-A .block-C__element-C2--modifier-C2 {
color: green;
}
ブラウザに表示される画面
参考にさせていただいたサイト
bem-methodology-ja/index.md at master · juno/bem-methodology-ja
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja
CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG
※ ブログでも同一の投稿を行っている。