マルチシートアプローチとかクラス名とか

最近、CSSのマルチシートネタでは、リセットCSSを使わないというケースや、必要最小限だけ使うのが良いよね、といったようにリセット回りのことが話題になってますね。
双方のケースが引用している、CSS Nite in Ginza, Vol.23において大藤さんは、マルチシートアプローチすらも使われるケースが減ってきているとおっしゃっておりました。※1
という訳で、マルチシートあたりが、また若干熱くなっているのかなということで、今回は僕が主に使用しているマルチシートアプローチに関するエントリーです。

そもそもマルチシートアプローチのメリットを考えてみると、あきらかに制作のしやすさという点があげられるでしょう。
今でこそ、Dreamwaeverなどのツールが進化したおかげで、CSSファイルのどこにどんな指定をしたのかというのは一瞬で分かるようになってきていますが、そうでないときには、2~3千行あるいはそれ以上になるCSSの指定を人間だけで管理していくというのは結構難しかったりします。
ですからファイルを分けて、それぞれに限定的な記述をすることで、どこにどんな指定があるのかが分かりやすくなり、管理のしやすさがグッと上がる訳ですね。

また、マルチシートアプローチは複数人でのマークアップ作業にも向いています。例えば1枚のCSSファイルを複数人でいじっていれば、ファイルの先祖がえりなんてのも当たり前でしょうし、CSSファイルを複数に分けることで、このファイルは誰と誰以外はさわっちゃダメみたいな権限の設定も容易に行えるようになる訳です。

マルチシートアプローチの説明はこの位にしておきまして、最近の僕のやり方ですと、以下のようなマルチシートにすることが多いです。

  • import.css
    • reset.css
    • common.css
    • module.css
    • ie.css
  • category.css
  • page.css

あくまでこのような感じになることが多いというだけで、全てがこうであるということではありませんが、まぁ概ねこんな感じでしょう。
ざっくりと説明しますと、サイト内のあらゆるページから「import.css」を読むことで、「reset.css」「common.css」「module.css」「ie.css」を読込みます。
さらに必要であれば、それぞれの(X)HTMLから「category.css」や「page.css」を読み込もうねという感じです。
もっと言えば、印刷用に「print.css」なんかもあるのですが、今回はスクリーン用だけということでここでは割愛します。

ここで「reset.css」「common.css」「ie.css」の3つに関してはそれほど説明するまでも無いでしょう。「reset.css」はブラウザリセット、「common.css」はサイト共通の結構大きな指定、「ie.css」はIE用のハックを記述しています。
問題は「module.css」なのですが、ここに記述している内容をちょっと工夫しています。

例えば、以下のような写真の一覧があったとしましょう。

  1. モジュール01
  2. モジュール02
  3. モジュール03
  4. モジュール04

この場合、全て写真の一覧には変わりませんので、仮に「.photo-list」というクラス名を付けたとしましょう。
その上で、多少の見た目の違いを指定しなければいけませんので、良く見るやり方としては、body要素や親要素となるdiv要素へIDやクラスを指定して、そこからの子孫セレクタで指定するというやり方があります。
これでも良いとは思いますが、最近の傾向としては全てクラス名で見た目の違いを吸収するようにしています。

ここでそれぞれの違いを考えてみると、

  • 写真の枚数の違いにより、一つの写真と説明の幅と、写真間の余白が違う(CSSで言えば「width」と「margin」)
  • 写真の枠線の色が違う(CSSで言えば「border-color」)

という2つの違いがあります。
では、クラス名に対して「.photo-listA01」という風にアルファベットと数字の2つの連番を加えてあげることで、この2つの違いを表現してみましょう。

共通の指定
.photo-listA01 li,
.photo-listA02 li,
.photo-listB02 li,
.photo-listB03 li {
	list-style: none;
	float: left;
	}
.photo-listA01 li img,
.photo-listA02 li img,
.photo-listB02 li img,
.photo-listB03 li img {
	border-width: 1px;
	border-style: solid;
	}
アルファベットによる写真枚数の管理(「width」と「margin」)
.photo-listA01 li,
.photo-listA02 li {
	width: 40px;
	margin-right: 10px;
	}
.photo-listB02 li,
.photo-listB03 li {
	width: 58px;
	margin-right: 8px;
	}
数字による写真の枠線の色の管理
.photo-listA01 li img {
	border-color: #f00;
	}
.photo-listA02 li img,
.photo-listB02 li img {
	border-color: #00f;
	}
.photo-listB03 li img {
	border-color: #0b1;
	}

と言う風に、クラス名だけで、見た目のり違いを表現できるようになる訳です。

また、このような考え方を行うには、各モジュール(※2)によって、サイトが構成されているような考え方が必要になってきます。
今回は、CSSのお話ではありますが、実はこのモジュールを基点とする考え方は、ビジュアルデザインにおいても重要になってきます。
よくマークアップをする人たちが何人か集まると、「出来上がるデザインモックが、各ページによって全くバラバラだと困るんでよね」というような話題になることがあります。
特に(X)HTMLのことをよく知らないデザイナーさんがデザインを行うと、そのようなバラバラが発生することも多いようですが、それは当然と言えば当然で、複数ページに渡る情報の関係性を理解していないからこそ起きる問題でしょう。

例えば、クライアントからページに入る文言をいただいた時点で、マークアップ側の人が、「このページのこの部分と、こっちのページのこの部分は、同じ写真の一覧ですね」などのように、デザイナーさんに対して、ざっくりとした情報の関係性を理解してもらうだけでもだいぶ変わってくるでしょう。

このような指示は、一見デザイナーさんに対して負荷がかかるので嫌がられそうですが、弊社の場合は全く逆でした。
デザイナーさん的には、「じゃぁ、こことここは同じような見た目にすれば良いんだな」と気づくことで、全く違う見た目を何個も作る必要もありませんので作業も楽になったということが起きました。

という訳で今回は、マルチシートアプローチとかクラス名とかに関する広義にはCSS設計などと呼ばれていることのお話しではあるのですが、そもそもCSSとは表現(見た目)を司るもの(逆に(X)HTMLは構造を司るもの)な訳で、CSS設計を考えるということは、実はビジュアルデザインも含めたワークフローまで変えることが出来るんじゃないですか?ということが言いたかったという次第です。

※1
あくまで、海外の個人blogを中心に、CSSを分析された結果ということです。
※2
各要素。サイトを構成する細かな部品のことを表しています。

comment

コメントを残す

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

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

TrackBack URL :