CSSのクラス名などは意味を表すものであるべき

WordPressはValidなxhtmlソースを吐き出す……と歌われていますが、標準付属のテーマ「WordPress Default」のCSSファイルで気になる点があったので、それも含めて持論を展開してみたいと思います。

はじめに

CSSのクラス名やid名は開発者が自由に定義することが出来ますが、だからといって(悪い意味で)適当な名前を付けて良いわけではありません。開発者は、保守のことを考えたうえで、わかりやすい命名をすることが求められています。

更に、私の中の課題としてはidとclassの使い分けです。非常に微妙な判断が求められると私は考えていますが、これについては別の機会に取り上げることします。

では、本題の命名方針についてまとめてみます。

見た目を表現する名前は付けない

この一言に尽きると思います。名前は「意味を表す」ものを付けるべきであって、「表示を表す」ものを付けるべきではありません。これは、現在存在してはいるものの推奨されないタグがあるのと似ています。推奨されないタグも、表示を表すタグです(center,b,u,font,sなど)。

推奨されない名前の例として、以下が挙げられます。WordPressのDefaultテーマでは、.aligncenterなどというクラスが存在していました(だからといって、Validなxhtmlでないという意味ではないです)。

  • red(赤文字にする)
  • center(中央表示にする)
  • bold(太字にする)
  • big(大文字にする)

これについて、何がダメなのか理解できない人も居るかもしれません。では、次のような事例について考えて見ましょう。

仕様変更/レイアウト変更があったとき

強調表示したい文章を次のように表現したとしましょう。

.red { color: red }
.bold { font-weight: bold; }
.bigger { font-size: 2em; }
ワールドカップ南アフリカ大会では、日本代表が<span class="red bold bigger">本田のフリーキック、遠藤のフリーキック、岡崎のシュートによって</span>決勝リーグ進出を決めた。

当面の運営はこれで上手く行っていたとしますが、ある日、顧客(もしくは自分の気まぐれで)から「強調表示している箇所を、青文字にして欲しい」という要望が出たとします。このとき、どのように対処しますか。上記のソースであれば、blueというクラスを新たに定義し、redという適用をblueに全て書き換えますか? 矛盾を覚悟で、red定義をcolor: blue;に書き換えますか?

ここは予め、このように定義するべきだった場面でしょう。

strong { color: red; font-weight: bold; font-size: 2em; }
ワールドカップ南アフリカ大会では日本代表が決勝リーグに進出したが、<strong>0対0のPK戦で駒野が外し、惜しくも決勝リーグ敗退</stron>となった。

その場面において、どのようなタグを使うべきかという判断は予めそのタグの存在を知っていなければなりません。調べようにも、その場面に適したタグの存在自体を知らなければ、調べるという行為にも達しません。そのため、現在使用できるタグ一覧にでも、目を通しておいたほうが良いと思います。覚えずとも、「あぁ、確かこの場面で使えるようなタグがあったな」程度で良いでしょう。

まとめ

タグの使い分けについては前の記事で触れましたが、今回はidやクラスにも同じことが言えるということについて書きました。

命名方法やタグの使いどころなどは、只の訪問者にとって全く関係ないことだったりします。訪問者にとって関心があるのは、多く場合デザインと使い勝手でしょう。内部でどのような方式が取られていようと興味はありません。結局は、開発者の独りよがりなのかもしれませんね。

結論

私はA型と、良く間違われます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください