【CSS設計】BEMの正しい書き方CSS設計2019.10.14目次CSS設計とは?BEMとは?BlockElementModifierCSS設計とは?CSS設計を取り入れるメリットとしては、メンテナンス性が向上する規模が大きくなっても整ったコードになる(破綻しづらい)複数人での開発がしやすくなるといったメリットがある。BEM以外にもFLOCSS、SMACSS、OOCSS、ECSS、MCSS等があるが今回はBEMについてのみ触れていく。BEMとは?BEMとは、Block,Element,Modifierの頭文字を取ったもの。Blockヘッダー、検索フォーム等のサイトにおいて独立したパーツ。単語の区切りはハイフン(-)で繋ぐ。例)search-formElementBlockの構成要素。ヘッダーの中のボタン、検索フォームの中の入力フォーム等で、BlockとElementはアンダースコア2つで繋ぐ(__)。block__elem1__elem2のような書き方は間違い。Blockの中に存在する必要がある。(__).ModifierBlockやElementの状態や特徴を表すもの。大きさを変えたい、色を変えたい等。アンダースコア1つで繋ぐ(_)。例)search-form__button_redsearch-form__button_size_sよくQiita等でハイフン2つ(–)とあるが、それはおそらくBEMをアレンジしたもので公式サイトにはこう書いてある。見つかりませんでした。RailsプログラミングタイトルとURLをコピーしました。