【CSS設計】BEMの正しい書き方

CSS設計とは?

CSS設計を取り入れるメリットとしては、

  • メンテナンス性が向上する
  • 規模が大きくなっても整ったコードになる(破綻しづらい)
  • 複数人での開発がしやすくなる

といったメリットがある。BEM以外にも

FLOCSSSMACSSOOCSSECSSMCSS

等があるが今回はBEMについてのみ触れていく。

BEMとは?

BEMとは、Block,Element,Modifierの頭文字を取ったもの。

Block

ヘッダー、検索フォーム等のサイトにおいて独立したパーツ。単語の区切りはハイフン(-)で繋ぐ。

例)search-form

Element

Blockの構成要素。ヘッダーの中のボタン、検索フォームの中の入力フォーム等で、BlockとElementはアンダースコア2つで繋ぐ(__)。block__elem1__elem2のような書き方は間違い。

必ずBlockの中に存在する必要がある。

間違った例)

input

search-form__content__input

正しい例)

search-form__input

search-form__content-input

以下公式サイトより引用

・Elements can be nested inside each other.
・You can have any number of nesting levels.
・An element is always part of a block, not another element. This means that element names can’t define a hierarchy such as block__elem1__elem2.

・The element name describes its purpose (“What is this?” — item, text, etc.), not its state (“What type, or what does it look like?” — red, big, etc.).
・The structure of an element’s full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).

Modifier

BlockやElementの状態や特徴を表すもの。大きさを変えたい、色を変えたい等。

アンダースコア1つで繋ぐ(_)

例)

search-form__button_red

search-form__button_size_s

よくQiita等でハイフン2つ(–)とあるが、それはおそらくBEMをアレンジしたもので公式サイトにはこう書いてある。

以下公式サイトより引用

・The modifier name describes its appearance (“What size?” or “Which theme?” and so on — size_s or theme_islands), its state (“How is it different from the others?” — disabled, focused, etc.) and its behavior (“How does it behave?” or “How does it respond to the user?” — such as directions_left-top).
・The modifier name is separated from the block or element name by a single underscore (_).

Quick start / Methodology / BEM
Quick start
タイトルとURLをコピーしました