論理構造を文脈に読み換えながら class 名を考える
最近、一部で話題に上がっている POSH にも、"Use good semantic-class-names" という実践項目がありますが、今日はその class 名のつけ方について、最近、思い至ったことから。
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational.
基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。）
例によって、あくまで試案であり、選択肢です。（というか、そもそも僕自身が試行錯誤の最中。）是非や取捨は各自でご判断ください。
関連リソース
- Naming conventions table（And all that Malarkey）
- Web Authoring Statistics: Classes（Google Code）
- コード共有のためのネーミングルール（我的春秋）
まずは従来型との実践例の比較
イメージが湧きにくいでしょうから、まずは実例を出してみますね。
よく目にする従来型の class 名
- header
- description
- information
- global-nav
- body
- contents
- hot-topics
- hot-products
- sidebar
- sub-nav
- banners
- contents
- footer
- credit
今回 提案する class名の一例
- site
- description
- information
- navigation
- page
- recent
- information
- products
- related
- navigation
- services
- recent
- publication
- credit
より論理構造を意識した class名を
具体的には、上に示した例のようにclass 名を上層から下層へと並べてみたときに、論理的なつながりや一貫性が保たれるようにします。ひとつの目安として、class 名を自然文に読み換えてみて、不自然じゃないかどうかをチェックしてみると良いかもしれません。
これまでは、どちらかというと個別のブロックごとの特性を抽象化して命名し、一本一本の枝の文脈を踏まえるというようなことは、あまり考えられないことが多かったと思います。
でも、どう考えても .header .description 領域のコンテンツは、「サイトに関する説明文」であって、「ヘッダに関する説明文」ではありませんよね？ここに、論理的な違和感を感じるようになったのが、この手法にたどり着いたそもそものきっかけです。
- site - description: サイト共通の 説明文
- site - information: サイト共通の 情報
- site - navigation: サイト共通の 案内
- page - navigation: ページ固有の 案内
- page - recent - information: ページ固有の 最近の 情報
- page - recent - products: ページ固有の 最近の 製品
- related - services: 関連する - サービス
header や (main-)contents, body, footer などは、Web ページを作成する時に好んで使われる class 名（もしくは id 名）ですが、通常、"header" class相当の場所にはサイト共通のメタレベルコンテンツが、また "body" class 相当の場所には、そのページ固有のオリジナルコンテンツが盛り込まれることが多いはず。そこで、今回の実践例では、サイト共通の情報とページ固有の情報を区別するという意味で、header class 相当を "site"、body（もしくは (main-)contents）class 相当を "page" という class 名にしてみました。
もし「ページ固有の 最近の 情報」という文脈が気に入らなければ、ourCompany - recent - product（「我が社の 最近の 製品」）などとする手もあります。この辺は、状況や目的に応じて、適切に論理構造を抽象化した名前をつけてみるといいでしょう。
論理的に同類のものには、意識的に同じ class名をつける
- #header #global-nav → .site .navigation
- #body #local-nav → .page .navigation
論理的に同類のものには、積極的に同じ class名をつけるようにします。たとえば、global-nav とか、local-navigation のような id, class名はやめて、最終的な見栄えの差異に関わらず、ナビゲーションメニューはサイトグローバルなものも、ページローカルなものも、一括して統一した class 名にします。
.site .navigation { ... } /* グローバルナビゲーション用スタイル */
.page .navigation { ... } /* ローカルナビゲーション用スタイル */
CSS でグローバルナビゲーションとローカルナビゲーションを区別したい時には、このように、論理構造の違いをセレクタに記述することで区別させられます。この方が各ナビゲーションをいつでも簡単に区別したり、同一視したり使い分けられるため、柔軟性が向上するというわけです。（詳細度の差も特別意識することなく自然な形で取り込むことができます。）
ついでに、今回 提案するモデルだとセレクタをそのまま自然文（というか名詞句？）として読み上げてみても、どういった集合を指しているか、初めてソースを覗く人でも理解・区別しやすいはず。ここも重要なポイントです。
従来型モデルでも構わないんですが...
生業としてたくさんの Web ページを作っているクリエイターさんが、どうしても見栄え本位で、マークアップを施してしまうのも、実は個人的に理解できなくもなかったりします。Web ページの見せ方に、ある種のデザインパターンみたいなものがあって、その中で特に再起性の高いモデルをコンポーネント化したくなるというのは、ごくごく自然な行動だと思います。
とはいえ、もう少し構造本位な（POSH な）マークアップに歩み寄る余地もあるような気がしてならない今日この頃です。というわけで、今回は日々の試行錯誤からのネタを取り上げてみました。
| 固定リンク
「［Web］XHTML」カテゴリの記事
- HTML の見出しをめぐる議論(2007.07.11)
- Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?(2007.06.03)
- 論理構造を文脈に読み換えながら class 名を考える(2007.05.30)
- 定義リストの違和感（続）(2007.05.28)
- 定義リストの違和感(2007.05.26)
この記事へのコメントは終了しました。
コメント
> headerというもの自体に付属の情報という意味合い
> はないのでしょうか？
その辺をどう捉えるかはあなた次第ですが、あえていうなら、「付属の情報」とか「メタ情報」とかというよりも、それらを格納する「場所」（セクションとかコンテナ）的な意味合いといった方が、まだしも近いように思います。
逆におたずねしますけど、headerが「付属の情報」を格納する「場所」であるとして、その「場所」が格納する「付属の情報」とは何でしょうか？footer、container、sectionなどとは、どう違うんでしょう？これらに対するあなたの答えは、ほかの人の答えと比較したときに、どのくらい揺れうると思いますか？（他人とコードを容易に共有できますか？）
投稿: ゆう | 2009-03-11 09:02
headerというもの自体に付属の情報という意味合いはないのでしょうか？
投稿: | 2009-03-10 23:31
このサイトで勉強させてもらっています。
別の視点でコメントさせていただきます。
CSSやHTMLを分からない人（サイトの制作を依頼してきたお客様）からも分かりやすいネーミングのほうがいいと思います。
ホームページビルダーなどでお客様が日々の更新をした場合、
ソースを見る機会は少ないとは思いますが、ネーミング分かりやすいほうがいいです。
なので、「より論理構造を意識した class名」は良いと思います。
投稿: みみたｎ | 2007-09-05 16:57
wu さん、コメント、ありがとうございます！
余計なお手間をお掛けしてしまってすみません。(^_^;ゞ
> 「実践するには一貫してある程度構造化(構造の補強)ができないとですね」
なるほど。そういうことでしたか。確かにおっしゃる通り、ある程度 その辺を留意することにはなりますよね。
３時のおやつも喉を通らないほど、気になってたので、これですっきりしました。(笑)
> classを自然言語のように辿る場合の文脈は、おもに
> divで区切られることが多くなると思うのですが、
> 宙ぶらりんなclassを作らないように考えないと
> いけませんね。
実は書いた後で、「自然言語というよりは名詞句と言った方が良かったかな？」「いや、フォームの場合は
#register #usernameのように動詞句もアリかもしれない！」とか、色々と考えてて、適正ないいまわしに修正できずにいました。まぁ、自然文というのは、あくまで目安であって、どうしてもつながりがしっくり来ないケースも出てくるとは思うんですけど、それでも、今までよりも上位ブロックと下位ブロックとの間の関係や文書の「構造」を意識できるようになるなら、試してみる価値は充分にあるかなと思った次第です。
それに、wuさんのおっしゃるように、この方法で少しでも "楽しく" コーディングできるなら、それがイチバン素敵な動機ですよね！(^-^*)
投稿: ゆう＠管理人 | 2007-05-31 23:14
ゆうさん、こんばんは。
del.icio.usを確認したら、あそこで切れていたのですね。/_;
「実践するには一貫してある程度構造化(構造の補強)ができないとですね」
という、ごくごく当たり前なコメントを書こうとしていました。(後から編集したものなのですが、変換してeditが終了されちゃったのかな)
classを自然言語のように辿る場合の文脈は、おもにdivで区切られることが多くなると思うのですが、宙ぶらりんなclassを作らないように考えないといけませんね。
今まで適当にclass名をつけたりdivを使ってた人にとっては、実践することによって、より具体的な文書設計が事前に必要になるのでいいですね!
僕も長いものに巻かれているので、もっともっと考えてマークアップしなきゃなぁと思いました。
でも、きっとこっちのほうが楽しいくコーディングできますね!
投稿: wu | 2007-05-31 22:42
DC さん、コメント、どもです。
今回は僕自身もモヤモヤしてた部分が、スーっと霧が晴れるようにスッキリしました。（後になって、連載のネタにしても良かったかなと気づいて、実は少し後悔してる部分もあったりするんですけど。）
> 以前、ゆうさんの言われていたように、最近はなる
> べくidやclassの使用は控えています。（といっても
> divなどはそうもいかない場合もありますが）
構造化記述言語で大事なのは、構造や意味を、構造そのものから推論させうる論理性なので、class や id も一概に削ればいいというものでもないんだと思います。
かといって、そこかしこに class や id が氾濫してしまうと、中身を容易に把握しきれなくなりますから、やはり闇雲に足場を増やせばいいというものでもなくて、適度な案配と制約を絶えず模索していくことが欠かせません。
でも、これって口で言うのは簡単ですけど、実践するとなると、なかなか骨が折れるんですよね〜。
DC さんも、もし模索の過程で、何か気づいた点が出てきましたら、是非、僕にも教えてくださいませ。
投稿: ゆう＠管理人 | 2007-05-31 06:53
＞ デッドリーさん
使い方は人それぞれですし、目的や状況によっても手段は変わりますから、デッドリーさんのようなマークアップもひとつの選択肢には違いないと思いますよ。
それに、少なくとも現時点では、header, footer の方が認知度が高いせいもあって、ソースコードを共有する際に都合がいい場面が多いはずです。認知度の高さも「直感的」に連想する名前と密接な関係がありますから。
ま、僕の試案は、今すぐ浸透するものでもありませんし、まだまだ練度を高めないといけない部分もありますから（たとえばフォームの class や id は、名詞句ではなく、ひょっとしたら動詞句にした方がいいかも...とか）、これから先、こつこつと穴を探したり改良したりして行こうと思ってます。
投稿: ゆう＠管理人 | 2007-05-31 06:19
最近、ようやくチームで制作する案件が出てきそうなので、構造からくるclassやidの名前の共通化、CSSのコンポーネント化をいろいろ考えていていたところで、タイムリーというか、すごく参考になりました。
以前、ゆうさんの言われていたように、最近はなるべくidやclassの使用は控えています。（といってもdivなどはそうもいかない場合もありますが）
今回の話題でも、個人的にネーミングルールやclassとidについてのモヤモヤした部分がスッキリした感じを受けました。
ネーミングについては慣れでheaderやfooterを使っていましたが、これを機会に改めてしまおうかなと思います。gNaviもたしかに.site .navigationの方がしっくりきますね。
投稿: Dancing Cloud | 2007-05-30 23:49
あー、常に「直感的な名前にする」というのは俺も意識していますねえ。
俺が運営しているサイトのデドプロでは「header」も「footer」もidにしてます。
クラスはidを指定している要素の中で使うというルールにしています。
投稿: デッドリー | 2007-05-30 20:32