はじめまして、新入社員の石野です。
昨年は見に行くのが遅くてちょっと残念なお花見でしたが
今年はキレイな桜が見れて少しハッピーな今日この頃。
社内でCSSの命名規則をBEMでやってく風潮だと聞いたので
これを機にしっかり調べて見ようと思いました。
BEM・Sassの基礎から
２つを合わせて、更にスッキリさせる方法まで
連載でお届けしたいと思います。
目次／このページでわかること
まずはBEMとは何か
Yandexという会社が考えたCSSの命名ガイドラインみたいなもの。
１：素早く、そして長く使えるように
２：大人数でのプロジェクトでもスピードが落ちず、メンテもしやすい
３：別の場所で再利用が簡単に行えるほど明確な命名
４：拡張も容易で、セレクタを見るだけで何を指定しているのかわかる
BEMのメリット・デメリット
「メリット」
・メリットは上述した通り学習コストが少ない
・長く使えて、拡張可能で、再利用が出来る
・HTMLのタグとBEMで付けられたクラス名を見るだけで
ある程度ページの構造がわかっちゃう
・だから後々のお手入れラクちん
「デメリット」
・規則に沿って命名すると長い
・だから普通のcssだと書くの大変
・BEMを知らないと「ん？」ってなる
・慣れるまでどこをブロックにするか悩む
・クラス名を何にするか悩む
その為のSass
今回はBEMの記事なのでSassについては今後の記事で紹介いたしますが、
簡単に言うとJavascriptに対するjQueryみたいなものです。
名前はSyntactically Awesome StyleSeatの略で
訳すと「構文がマジでヤバい(良い意味で)スタイルシート」…
とっても便利でBEMとの親和性も高いです。
命名規則
B(block) E(element) M(modifier)
という構成要素に分けて、それをそのまま名前にしてしまう。
BとEは__(アンダーライン２つ)でつなぎ、
EとMは–(ハイフン２つ)でつなぎ、
BとMは_(アンダーライン１つ)でつなぐ。
単語の連結は-(ハイフン１つ)かキャメルケースでつなぐ。
Blockは要素の親玉
ElementはBlockの子供
ModifierはElementの派生
わかりやすく人の体で例えると
Blockは手
Elementは指
Modifierは親指
実際に書いてみるとこんな感じ。
手__指–親指
手__指–小指
手__指–毛
手__平–しわ
手__平–豆
手__甲–毛
その形しかないの？
いえいえ、そんな事はございません。
手__指–骨
手_骨
エレメントが無い事もあれば、
手-右__指–骨
手-左__指–骨
ブロックが入れ子になる事もあります。
どこをブロックにするのが正しいの？
これがややこしい所ですね。
手-右__指–骨
手-左__指–骨
右手__指–骨
左手__指–骨
上の２つと下の２つ、どちらもありえるのです。
ページの内容が四肢に関するものなら
ブロックは右手、左手、右足、左足でしょう。
体のしくみに関するものなら
ブロックは頭、手、足、胸、腹…となるでしょう。
ページの内容によって変わるからこそ
クラス名を見てどんなページかが判断できるし
拡張性とメンテナンス性があるんですね。
所感
はじめに書いた「大人数でのプロジェクトでも～」という所には
コーダー・フロントエンドエンジニアだけでなく、
ディレクターやデザイナーも含まれているというのが
素晴らしい思想だなと感じました。
ディレクター・デザイナーさん達の時点で
B・E・Mのカテゴライズがされた上で
デザインが降りてきたら
早くキレイにコーディングが出来るし
変更があっても対応がしやすいというのもメリットだと思います。
(※私にその技量があるかはさておき)
次回はBEMの発展編か、Sassの基礎編になります。
お楽しみに！