コーディングをしていると同じ内容が何度も出てくる事がよくあります。
特に商品ページのLPでシリーズ物だと同じ構成が何度も登場します。
上の写真と下の写真はレイアウトが同じです
↑みたいに似た構成の時にいい加減なclassの付け方をするとコードの量が増えるしあとで修正する時が大変です。
しかも適当に付けたclass名なので何に対して付けたのかが分かりにくく間違って同じclass名を何度も使うかもしれません。
またコーディングが終わって数ヶ月後にcssを見てもどれに付けたclassかが分かりにくいです。
このやり方だと個人で仕事するなら大丈夫ですが制作会社で働くと他の人がコードを見た時に「どこのクラス名だろう？」となります。
たまたまTwitterで見つけたのですがclassの名前の付けた方(命名規則)がありました。
命名規則は色々あるけどBEMという命名規則がよく使われるみたいです。
BEMは↓の略称です。
- Block (親要素に使う)
- Element (子要素に使う)
- Modifier(親要素と小要素を装飾する時に使う)
BEMを使うとclass名を細かくするので同じclassを二度以上使うことがなくなりcssを重複して画面崩れになるのを防げます。
BEMの使い方
↓で親クラス(Block)に「texture1」を選んで子クラス(Element)に「pタグ」を選んだとします。
子classのpタグにclass名を付ける時は（親classの名前)__(子classの名前)にします。
例えば↓で1つ目のpタグのclass名は「textue1__name」で2つ目のclass名は「
装飾したい(Modifier)時は(classの名前) — (装飾の時に自分で付けるclassの名前)とします。
↓の18行目の「list__image — change」です。
cssを書く時ですがscssを使うとコードの量をもっと減らせます。
親要素に対する子要素を書く時は↓になります。
親要素に対する子要素のMODIFIERを書く時は↓になります。
ネットで見つけて自分で使っているのはこれ位なのですが色んな人のコードを見てもめっちゃ細かく説明されている内容がなかったので恐らく細かすぎる書き方はないと思います。
class名が長くなるのが嫌で我流のルールを加えている人が結構いました。
BEMでコーディングをしたけど慣れるまでに時間がかかる
慣れてないせいでコーディングにとにかく時間がかかります。
要素にclass名を付ける時に何度も使いまわしができるように親要素のクラス名を使わないといけないですがこの判断に時間がかかります。
ただ同じcssを何度も使いまわしするのでHTMLのclass名がごちゃごちゃしないしcssをscssにしているので余計すっきりします。
BEMを意識するようになってscssの量がかなり減ったので練習を積んですっきりしたコードを書けるようにしたいです。
class名が少なくて見た時にどこを指しているかがわかりやすいと後で修正したり変更したりなど保守性を保つことが容易になります。
企業のLPの場合「〜%オフ」みたいなのを時々するので保守性を保つことは大事だと思います。
エディタはvidual studio code(vscode)を使うとscssが使えるのでまだvscodeを使ってない人はvscodeにしてはどうでしょうか？
