ちゃんとしたCSSを書くのは難しい

CSSはHTML要素の要素名、id名、class名をセレクターとし、プロパティを定義していくだけの単純なものですが、メンテナブルなものを書こうとするとかなり難しい。勢いで書いてしまって後から後悔することばかりです。

でも最近はSASS等のプリプロセッサがあるから記述が冗長になるのは大分軽減されましたね。importとかmixinがない環境でCSSを書くなんてもう絶対に嫌。勘弁して下さい。

ScoutがあるからデザイナーさんにもSCSSで書いてもらえるし、本当に助かってます。

ボキャブラリーが貧しいのもきつい

しかしCSSが酷い場合ってただ冗長なだけじゃなくてセレクターにセンスがなさすぎるって事も乗っかってくる場合が多い。

.text1 とか .img01 なんてクラス名が付いていると、何のためにHTMLとCSSファイルが別になっているのか…と悲しい気持ちになる。連番降るぐらいならHTMLにstyle属性でインラインで書いてくれたほうがまだマシ。

あと、.honbun とか .gazou とかもやめてほしい。ローマ字表現は曖昧なので表記を統一することはできない。例えば僕の名前は孝造（コウゾウ）だけど自分では kouzou とは書かない。絶対に kozo が正しい。だけど同じ “オウ” の発音が入る 画像 の場合は gazo でいいの？ gazou と書く人のほうが多いんじゃないでしょうか。
だから日本語じゃなく、意味のある英語で書こうよと思う。

Bootstrapでちょっと助かった

bootstrapが流行って、ボタンなら .btn で、青く目立たせたいなら .btn-primary も一緒につけるんだよっていうのは、書くのも読むのも明快。簡単に綺麗なUIが欲しいという要求を満たす過程で命名手法まで学べちゃうんだから素晴らしい。

あとUIの名前を標準化してくれたんじゃないかなとも思ってます。.navbar なんていい例でそもそも英語でどこまで略していいのかネイティブじゃないと判断つかいないですよね。

構造が伝わらない欠点

ただbootstrap的な表現でも行き詰まることよくあって、曖昧な感じで今までスルーしてきた。
.btn の目立たせたい奴は .btn-primary でいいんだけど、 .btnの中に下向きの矢印入れてドロップダウンを実装したい時とか、矢印は .btn-caret でいいの？ さっきのは状態を表してて今度は細部のパーツなのかよと。

文章とか画像の内容に引っ張られる命名から、UIパターンの命名にやっと進化できたのに今度は状態と細部パーツが同じ表現で混乱。実際これでわけがわからなくなったプロジェクトが最近ありました。

BEMは良い

BEMが醜いとか、構造化という縛りに振り回されて辛いみたいな意見もあるみたいだけど、僕はもうこれでいいと思います。

Block　Element　Modifier の頭文字をとってBEM。UIパーツをモジュール化したものに名前をつけたのが Block。そのBlockの細部のパーツの名前は Element。BlockとElementがそれぞれ変化した状態を Modifer という分類で表現する。

それぞれは以下のように連結して表現すれば名前のどの部分が何を表しているかが明快になります。

.block__element--modifier

先のボタンの例に当てはめればこんな感じに

.btn
.btn--primary
.btn__caret

Elementはアンダースコア２つで連結し、Modifierはハイフン２つで連結するので見事にprimaryとcaretが分類されて用途の違いが表現されています。

さらにこれが凄いのは各名前がワンワードじゃなくても全然問題ないってこと。
非BEMならこんななっていたものが

<ul class="category-list category-list-design">
  <li>
    <h3 class="category-list-title">...</h3>
    <p class="category-list-description">..</p>
  </li>
</ul>

こうなるから

<ul class="category-list category-list--design">
  <li>
    <h3 class="category-list__title">...</h3>
    <p class="category-list__description">..</p>
  </li>
</ul>

どうしていままでハイフン２つつなぎとか思いつかなかったんだろう…。