スタイルシートのclass名、id名の命名規則で悩む

スタイルシートを組むとき <span class="red">テキスト</span> は悪い命名規則だ、という話題をそこかしこで見かけます。 確かにclass名がredの色をオレンジ色などに変更したときに、果たしてclass名がredのままでいいのか?という疑問がわきます。

実態とclass名が違うと、後々のメンテナンス性も悪くなります。これは同様にleftBlockなどもそうで、leftBlockを右に持っていきたい!となったときにrightBlockにしなくていいのか?と思います。

しかしながら、 <span class="red">テキスト</span> が許されるケースがあると思うのです。

Class名とID名の命名規則(2) | Blog hamashun.com でも触れられていますが、 --引用

しかし、先日行われた某オーディション後の懇親会で、とある企業の方とお話していたのですけど、そこでこんな意見を聞きました。「実際の業務として何より重要なのは、誰が見てもそれが何を表しているのかが、すぐに分かる表記です」

と あるように、ぱっと見たときに何を意味しているのかわからない命名規則は、複数人で作業をするときには困りものです。

全てのclass名をドキュメントに まとめればいいのか?というとそうでもなく、ドキュメントを見ないとわからないような命名規則は規則ではないのでは?とも思います。

それに、機能ごとにclass名を作っていたら、似たようなスタイルも別のclass名になるため、ちょっとpaddingの値を変えたいなと思ったとき に該当するclassのpaddingを全部修正する必要が出るため、メンテナンス性が悪くなります。

仕事でサイト制作するときには常に変更に柔軟な作りを目指さなければなりませんので、うまく使い回せるスタイル用の命名規則は用意しておくべきです。 それに、例えばCMSを使って、そこまでスタイルシートに詳しくない人がサイトを更新するとき、「文字の色を青くしたいんですけど」「オレンジ色の文字も 用意してください」といった要望が出たとき、どんなclass名をつければいいのでしょうか。

そこまで構造的な文章を書く、なんてケースは少ないですし、(皆さんブログにh2,h3・・・の見出し使ってます?リストとか「・」黒丸で代用してません か?) h2の次にh5とか使ってませんか?僕は使ってます。 文字の色を変えたいところに機能名をつけるのは困難だと思うのです。

例えば「明日は誕生日」の文章中の「誕生日」を青くしたいとしたとき、class名にbirthdayという名前をつけますか? class名にspecialDayという名前をつけますか? 上記二つのclass名だと、「今度友達が結婚するんだって」の「結婚」を青くしたいとき、上記二つのclass名はもう使えませんよね。

やはり、直感的なわかりやすさというものも大切だと思うのです。このようなケースではclass名をblueにしてあげることが、サイトを更新する人に対 するユーザビリティだと思うのです。

スタイルシートをマスターした人が一人でブログ・サイトを更新するケースは問題ありませんが、サイトを更新するのはスタイルシートをマスターした人ばかり ではないのです。

<span class="red">テキスト</span> がいけない、という一辺倒ではなくて、ケースバイケースだということ、また機能と言うことにこだわりすぎてメンテナンス性が悪くなってしまってはcssの メリットが失われてしまうと思うのです。

投稿日:08年02月19日 20:47:23