まんげつのつぶやき

ただのメモです

オレオレCSS記法のメモ

CSS

運用メインの現場に配属されたおかげでCSSの設計から離れて久しく、ちょっとトレンドに乗り切れてないところがあったので、今までの方法そのものを見直すべく再勉強してみたのでメモっておく。

流行りに乗ってSMACSSかBEMかどっちかだなーと思っていたけど、なんとなくどっちもモヤモヤするのでオレオレ手法を考えてみた。参考はこことかここなど。CSSオジサンたちはこういう話大好きだから、「BEM」で検索するといっぱいみつかって幸せになれる。

まずはBEMベース

SMACSSでもよかったのだが、テーマはそもそも使わないケースが多いし、レイアウトとモジュールがガッツリ分離してるところに若干の柔軟性のなさとかHTML側に付与するクラスが多くなる懸念を感じたので、より要素が少ないBEMベースで考えることにした。
ただし、BEMはベースタグもブロックとして扱うようなニュアンスがあり少しややこしいので、ベースの扱いだけはSMACSSのそれを採用した。

  • B - Block
    • 包括（ブロック）要素。他ブロックの内包も可能。
  • E - Element
    • インライン要素。ブロックの内包要素のみに存在する。
  • M - Modifiers
    • 見栄えや振る舞いが異なるブロックまたはエレメントの状態。名前と値がセットになる。
  • B - Base（おまけ）
    • ベースタグ。リセットCSSなどはここで指定。

と言った感じ。

命名規則について

ブロック名は、明確にどのブロックを指すかを表現できなければならないため、プロジェクト内で一意である必要がある。 同じブロックの唯一のインスタンスは同じ名前を持つことができる（訳注：シングルトン的な認識をするブロックの場合、ということと思われる）。
その場合、ある1つのブロックがページに2回（3回、4回、…）と表れる、と表現することになる。
エレメント名はそのブロックのスコープ内で一意である必要がある。 エレメントは何度も繰り返すことができる。
引用元：Japanese Translations of BEM-Methodology

ブロック名はかぶっちゃダメ（あくまでもCSS内での話で、HTML上で同じスタイルのブロックが複数回出現するのは問題ない）で、エレメント名は包括ブロック内ではかぶっちゃダメ、だけど別の包括ブロック内だったら使ってもOK、ってこと…でいいのかな。
とりあえず個人的にはそういう解釈をしている。

というわけでマイルール

  • それぞれの名前の単語つなぎはlowerCamelCaseを使う
  • ブロック名とエレメント名の接続は__（アンダースコア2つ）
  • ブロック名またはエレメント名とモディファイア名の接続は_（アンダースコア1つ）
  • モディファイア名と値の接続は-（ハイフン1つ）
// 例：ブロック名がmenuList、エレメント名がitemでモディファイア名state、値がactiveの場合
<ul class="menuList">
  <li class="memuList__item menuList__item_state-active">めにゅー</li>
</ul>

本当はハイフンつなぎなしにしたかったんだけど、わかりやすさを求めたらハイフン必要だった。でもハイフン2個つなぎは正直ないので、単語区切りはキャメルケースで。書いてて楽しくないルールはよろしくない。

と、ここまで書いて「クラス名すごく長いから、開発スピード出すにはあまり向いてない？」とか少し思ったけど、毎回そんなこと言ってOOCSSライクな適当設計してきたから、後々の負債に繋がって修正のたびに苦痛を強いられるわけなので、多少四の五の言われても「うるせー黙れ」と多少強引にルール化してしまうのも手かなあ、と考えている。