これは、OPENLOGI Advent Calendar 2021の17日目の記事です。
今までコーディング規則とは程遠い位置にいたデザイナー（仮）がcssをBEMに則って書いてみました。
かなり初歩的なことを話しているので、こんな時代もあったなあと読んでいただければ幸いです。
そもそもBEMとは？
Block Element Modifierの略で、
Block → 大きい括り（親要素全部）
Element → 大きい括りの中にいる要素（親要素の中の子要素）
Modifier → 上記2つの変化球（形や色が変わる場合）
の3つに分けて考えていくことでCSSを設計･命名していく手法のことです。
前提（取り入れたもの）
- BEMの中でも特にMindBEMdingと呼ばれている命名法
- MindBEMdingはcsswizardryことHarry Robertsが提唱したCSSの命名規則のこと。
- FLOCSS
- 株式会社サイバーエージェントのエンジニアであるHiroki Taniさんが提唱したCSS設計手法で、日本人が作成していてドキュメントが日本語ということで、日本での利用頻度が高まっていると思われるCSS設計になります。
-
.c-[Components] 小さい使い回しの聞く要素。ボタン、タイトルから、リストなど大き目のコンポーネントまで。あまり margin をつけない。 -
.p-[Projects] 特定のページに固有の要素。例えば 「会社概要」だけで使われているスタイルを書く場合、.p-companyというふうにページ名を指定し、使う。margin持たせてもいい。 -
.l-[Layouts]レイアウトに関わる要素。margin や max-width などが書かれている。 -
.u-[Utilities] 汎用クラス。- mt10 →
u-mt10 - hide-pc →
u-hide-pc
- mt10 →
-
- Sass
- Rubyで作られたメタ言語のこと。CSSの拡張版で、書き方はCSSと同じ。
- 変数が使える
- $main-colorとかで色を設定したら、main-colorって入れたらその設定された色になる（カラーコードがいらない）
- 例
$main-color : #fff;
.some-class {
color: $main-color;
}
感想
BEMの内容を調べたときの感想
Block要素が幅広いことに気づかず、HTMLで言う<section>とか<div>だけだと勘違いしていました。
親要素が全てBlockになるというのを理解するまでちょっとだけ時間がかかりました。
今までスタイルシート一つで管理していたので、まずスタイルシートをページごとに作成することに慣れなければいけないと感じました。
今までは、FLOCSSでいうuをたくさん作っていろんなところに使う書き方をしていたので、そのページにしか使わない要素なのかどうなのかの判断にも慣れなければいけないと思いました。
いざBEMでコーディングしてみたときの感想
classの名付けに苦労しました。本当に苦労しました。
他と被ってはいけないけど似たようなレイアウトが多い・・・みたいな感じで苦労しました。
FLOCSSでいうuなのかpなのか問題も出てきました。
コーディングするデザインをしっかり見て、他に使いまわせるのかどうかの確認が大事だなあと思いました。
いつもはmarginだけのclass作って適当にやっていたので実際好みが分かれるところだと思いますが、marginを上のclassに入れるか下のclassに入れるかも迷いました。
Sassだとネストや変数が使えるのですが、ネストも変数も慣れておらず特に変数が難しく感じました。
正直BEMもSassの変数も完全理解はできてないので完全理解できるように頑張ります。