title-coding
Design

コーディング修行 クラス名編

こんにちは!新人森田です。
何気にマラソン大会を間近に控えた先週末、はじめて皇居ランしました。
走る前は諦める気満々でしたが、だんだん楽しくなってきて約5km完走できました!
恥ずかしながら人生初の快挙です。

筋肉痛がおさまったらまた走ろうと乗り気でいたら、日曜日に微熱とだるさに襲われるという重傷っぷり。
風邪引いたのかと思いました。
日頃の運動不足がたたりまくっています。。

なんとか良くなった今回は、サイトコピーの番外編な感じでクラス名の扱いについてまとめてみます。

クラス名の扱い

BEMの命名規則

最近取り組んでいるのは、BEMの命名規則を取り入れたやり方です。
師匠はCSSの命名規則をちゃんとやるためにBEMはいい選択だと思うそうです。

BEMとは。
アメリカのある企業でエンジニアと非エンジニア社員がhtml内の要素を正確に把握する為に作られたもので、お互いの意思疎通・情報共有を促進するためにお互いが歩み寄りながら出来たのだとか。
また、後から参入したメンバーにもすぐ理解しやすく、自分で読み返しても分かりやすいという利点もあります。
バリバリのエンジニアさんからすると美しくないようですが、上記のような利点はとても現実的と言えそうです。

BEMという命名規則とSass 3.3の新しい記法
こちらに分かりやすく且つ実践的にまとめてあります。

BEM
こちらが本家。英文ですが概要がつかめると思います。

実践してみる

ルールが分かったところで、前回作ったインデックスページを例にして見てみましょう。
内容を省略して大枠の部分のクラスを取り出すとこんな感じです。

0330-2

hamlという書き方で作ったので<div>などが省略されてます。
インデントで入れ子状態を表していて、閉じタグ不要なのが楽々です。

一番上の.tosakenで囲っているのは、他ページとの名前のバッティングを回避するためです。
以下の部分は実際の表示と照らし合わせて見ると分かりやすいかもしれません。

0330-1b

.sectionで行を分けて、.section__innerで内側の要素を囲っています。
ヘッダー部は.section__inner––header(innerがheaderの状態)と書いて差別化してあります。
コンテンツ部はアイコンを.section__label、内容を.section__contentでまとめて、この枠組みを繰り返しています。

BEMで正確に追おうとすると、例えばロゴは.section__inner––header__logoとなるかと思いますが、大事なのは正確さではなくて分かりやすさです。
ロゴといえばこのページではタイトルロゴしかあり得ないので独立した.logoになっています。
クラス名とスタイルが対応していれば内容はどうであれデザインには反映されるわけで、正確すぎるのも自己満足の極みというか、それを言っちゃうと元も子もないんですが。
要するに誰が見ても分かりやすく書こう!という意識が大事ということです。

悪い例

正解例を挙げたあとで私が最初に書いていたコードを再現してみます。

0330-3

全体の構成的には全く同じで、これにスタイルを当てれば実際の表示も変わりません。
BEMの命名規則にも従った書き方です。

ではなにが良くないのかというと、クラス名が内容に引っ張られすぎている点です。

.header(headerタグでも可)でコンテンツと差別化。
.companyというクラスは、その中身が会社情報であったことから付けました。

それぞれの要素の役割をもっと俯瞰して見てみると、区分けするパーツなのに.companyはちょっとおかしい。
icon、addressといった部分も直接的すぎます。
枠組みはあくまで枠組みとしてクラス名を付けることで、どんなサイトにも適応できるコーディングが出来上がるんですね。

0330-4b

ビフォーアフターはこんな感じです。
スッキリまとまりました!

まとめ

サイトコピーの作業の間に師匠からクラス名のご指摘をがっつり頂いたので、復習の意味も兼ねてまとめてみました。
BEMで追う範囲や汎用的な名付け方を見極めるにはまだ修行が足りないようです。
あと“__”と“––”の使い分けもまだまだ甘かったりします。
この辺はたくさん読んだり書いたり数をこなして慣れていくに限るんじゃないかと思います。
空いた時間でもっとガツガツ書かねばー。

というわけで今回はこの辺で終わります。押忍!

標準