ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

「BEM」+「Sass」でスッキリ見やすいスタイリッシュなスタイルを書いてみたい BEM[基礎編]

はじめまして、新入社員の石野です。

昨年は見に行くのが遅くてちょっと残念なお花見でしたが
今年はキレイな桜が見れて少しハッピーな今日この頃。

社内でCSSの命名規則をBEMでやってく風潮だと聞いたので
これを機にしっかり調べて見ようと思いました。

BEM・Sassの基礎から
2つを合わせて、更にスッキリさせる方法まで
連載でお届けしたいと思います。

まずはBEMとは何か

Yandexという会社が考えたCSSの命名ガイドラインみたいなもの。

1:素早く、そして長く使えるように
2:大人数でのプロジェクトでもスピードが落ちず、メンテもしやすい
3:別の場所で再利用が簡単に行えるほど明確な命名
4:拡張も容易で、セレクタを見るだけで何を指定しているのかわかる

BEMのメリット・デメリット

「メリット」
・メリットは上述した通り学習コストが少ない
・長く使えて、拡張可能で、再利用が出来る
・HTMLのタグとBEMで付けられたクラス名を見るだけで
ある程度ページの構造がわかっちゃう
・だから後々のお手入れラクちん

「デメリット」
・規則に沿って命名すると長い
・だから普通のcssだと書くの大変
・BEMを知らないと「ん?」ってなる
・慣れるまでどこをブロックにするか悩む
・クラス名を何にするか悩む

その為のSass

今回はBEMの記事なのでSassについては今後の記事で紹介いたしますが、
簡単に言うとJavascriptに対するjQueryみたいなものです。
名前はSyntactically Awesome StyleSeatの略で
訳すと「構文がマジでヤバい(良い意味で)スタイルシート」…
とっても便利でBEMとの親和性も高いです。

命名規則

B(block) E(element) M(modifier)
という構成要素に分けて、それをそのまま名前にしてしまう。
BとEは__(アンダーライン2つ)でつなぎ、
EとMは–(ハイフン2つ)でつなぎ、
BとMは_(アンダーライン1つ)でつなぐ。
単語の連結は-(ハイフン1つ)かキャメルケースでつなぐ。

Blockは要素の親玉
ElementはBlockの子供
ModifierはElementの派生

わかりやすく人の体で例えると
Blockは手
Elementは指
Modifierは親指

実際に書いてみるとこんな感じ。

手__指–親指
手__指–小指
手__指–毛
手__平–しわ
手__平–豆
手__甲–毛

その形しかないの?

いえいえ、そんな事はございません。

手__指–骨
手_骨

エレメントが無い事もあれば、

手-右__指–骨
手-左__指–骨

ブロックが入れ子になる事もあります。

どこをブロックにするのが正しいの?

これがややこしい所ですね。

手-右__指–骨
手-左__指–骨

右手__指–骨
左手__指–骨

上の2つと下の2つ、どちらもありえるのです。

ページの内容が四肢に関するものなら
ブロックは右手、左手、右足、左足でしょう。
体のしくみに関するものなら
ブロックは頭、手、足、胸、腹…となるでしょう。

ページの内容によって変わるからこそ
クラス名を見てどんなページかが判断できるし
拡張性とメンテナンス性があるんですね。

所感

はじめに書いた「大人数でのプロジェクトでも~」という所には
コーダー・フロントエンドエンジニアだけでなく、
ディレクターやデザイナーも含まれているというのが
素晴らしい思想だなと感じました。

ディレクター・デザイナーさん達の時点で
B・E・Mのカテゴライズがされた上で
デザインが降りてきたら
早くキレイにコーディングが出来るし
変更があっても対応がしやすいというのもメリットだと思います。
(※私にその技量があるかはさておき)

次回はBEMの発展編か、Sassの基礎編になります。
お楽しみに!