[Webサイト制作]BEMについての命名規則などのまとめ

Webサイトは基本的にHTMLとCSSで実装されますが、この時のコードの記述方法としてBEMというものがあります。

個人開発の場合、記述など気にせずガリガリ書いても問題ありませんがメンテナンス性などを考えると BEMで記述した方が良いと言われれいます。

今回はBEMについての情報をまとめます。

BEMってなに？

フロントエンドの設計方法の一つで、Block、Element、Modifierの3つに分けてHTMLやCSSを設計していきます。

それぞれの頭文字をとってBEMというものです。

https://en.bem.info/methodology/

サイトの構成物を

• Block(ブロック)
• Element(エレメント/要素)
• Modifier(変更)

の3つに分けて構成していきます。

例えば、上部にメニューを作成するとします。

メニュー部分を一つの大きな塊、ブロックと考えてそれぞれの構成物、ロゴやメニュー、検索窓をElementと考えます。

そして、Modifierはブロックや構成物を変更したものになります。

例えば、トップページ以外ではメニューの色を変えたりフォントサイズを変更したり・・・こういった場合にブロックやエレメントをModifier(変更)します。

ベースを残してパーツを流用するとイメージしてみると分かりやすいと思います。

BEMを使う意味

BEMは厳格なルールに則ってHTMLやCSSを記述します。あくまで書き方に関するお作法なのでBEMを導入しなくてもWebサイトは作ることができます。

それでは、BEMを導入するメリットはどういったものがあるのでしょうか？

BEMは厳格なルールに則ってコードを書きますので、メンテナンス性の向上に繋がります。

ルールの統一で誰が見ても分かりやすいコードであれば、メンテナンス性も向上しますし、複数の人間が関わるプロジェクト、大規模なWebサイトで最も力を発揮します。

BEMの記述ルール

次にBEMの厳格なルールを見ていきます。

BlockとElementの書き方

BlockとElementを記述する時はアンダースコア二つで繋げます。

BlockやElementを二つ以上の単語で記述する時

BlockやElementで二つ以上の単語を記述する場合は、ハイフンで繋げます。

.hero-image { }

Modifierの記述方法

ブロックとエレメントと結合する時にはハイフン二連続です。

例えば、メニューのうち一つは別の色のものを作成するとします。

.menu--white { }

Modifier(変更)の記述方法は、key(値)とvalue(名前)で構成されますが、例えば現在のタブのみ別のスタイルをあてる場合、keyとvalueはアンダースコア一つです。

.menu--state_current { }

まとめ

いかがでしたでしょうか。BEMについて紹介しました。

クラス名が冗長になりがちになるので、慣れないうちは戸惑うと思いますが・・・