読者のニコラスさんからの投稿です:

<body>要素や<HTML>要素内で、IDやクラスが使われているのをよく目にするのですが、何故この様なことをする必要があるのでしょうか。どちらの要素もファイル上1つしか存在しないはずなので、bodyやhtmlをCSSで直接装飾したらよいのではないでしょうか。

ニコラスさんがおっしゃっているのは、おそらくこういうことではないかと思います:

<html class="happyNewYear">
   

.happyNewYear { background: url(/images/fireworks.jpg); }
   

ただ下記の様にして、クラスネームを省略してしまったらいいのではないかと言うことですよね:

html { background: url(/images/fireworks.jpg); }
   

結局HTMLファイル上に、<html>要素は1つしか存在しませんものね。
ニコラスさんのおっしゃることはよく分かります。確かにWEBページのソース表示を見てみると、<html>タグ内に余計なクラスやIDが記述されているのを見かけることがあります。しかし実際、これらのトップレベルのクラスは非常に便利なんです。それではセオリーの復習と、実際の例をいくつか見てみましょうか。

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

多数のページ、少数のCSSファイル

CSSの基本的な考え方は、マークアップからデザイン部分を抽出することです。100を超える全てのページが同じCSSファイルを共有することだってあるのです。これは様々な理由から、きわめて効率的であると言えるかと思います。まず1つ目の理由として、デザインの変更が必要となった時、100ページそれぞれを修正するよりも、一発修正出来た方が楽に決まっています。トップレベルのクラスはどのページが現在表示されているのか識別するのに役に立ち、またその他のページとは異なるスタイリングを施すことも可能にします。

Multiple HTML HTMLタグにIDやクラスを指定するワケ

異なるページで、同じCSSを共有し、異なるデザインを施す。そして最高レベルの要素で発生していることなので、ページ全体のデザインは、個々のクラスを使用して設定することが出来ます。(よろしければ過去のアーティクルもご参照くださいね。)

WordPress

WordPressのパワーサイトでは、ページを表示するためにテーマを使用します。サイト上の全てのページはアクティブなテーマから作られています。このテーマには「header.php」と呼ばれるファイルがあり、全てのページの上部(doctypeやhead、bodyやhtmlのオープニングタグなど)を出力しています。また、WordPressには「body_class()」というファンクションがあり、こちらはロードされているページの種類に応じて、多数のクラスを出力してくれます。殆どのテーマに下記のようなオープニングボディタグがあります:

<body <?php body_class(); ?>>
   

シングルポストのページでは、この様な出力になるかと思います:

<body class="single single-post postid-8212 logged-in">
   

ホームページの場合は、この様な出力になるかと思います:

<body class="home blog">
   

このお陰でCSSで使用可能な多数のフックが出来るので、ページの種類に応じて個別設定が可能になります。

.single h2 {
   font-size: 150%; /* Fonts bigger on single post pages */
}
.home aside {
   width: 100%;  /* Sidebar kicked to bottom of page on homepage */
}
   

html要素を直接スタイル設定することが出来るのに、何故WordPressが「body_class」と呼ぶのかよく分かりませんよね。そうなんです。この機能をhtml要素に適用させることが出来るんですよ。

Modernizr

Modernizrは、JavaScriptライブラリで、こちらもトップレベルのクラスを追加してくれます。ロードされ実行される時にクラスを動的にhtml要素に追加します。クラスは現在のブラウザの機能を象徴しており、WordPressが適用させてくるクラスは、個々のページをそれぞれ別々に設定することを可能とするクラスであり、Modernizerが適用させてくるクラスは、ブラウザの機能に応じて同じページが異なって見えるように使用出来るクラスです。
Modernizr使用後のhtml要素はこのような感じになります:

<html class="js flexbox canvas canvastext no-webgl no-touch
  geolocation postmessage websqldatabase no-indexeddb
  hashchange history draganddrop websockets rgba hsla
  multiplebgs backgroundsize borderimage borderradius
  boxshadow textshadow opacity cssanimations csscolumns
  cssgradients cssreflections csstransforms no-csstransforms3d
  csstransitions fontface video audio localstorage sessionstorage
  webworkers applicationcache svg inlinesvg smil svgclippaths">
   

なのでCSSを使って、機能に応じて異なる設定をすることが出来ます:

section {
  background: url(boring-fallback.jpg);
}
.multiplebgs section {
  background:
    url(logo.png) top left no-repeat,
    url(texture.jpg),
    url(top-edge.png) top left repeat-y;
}
   

その他には?


もしこの他にもトップレベルのクラスの使用方法をご存知でしたら、是非教えてください。