美しいスタイルシートを作るためのテクニック

Webデザイン,豆知識

The Art of Crafting Beautiful Stylesheets ≪ Azadcreative.comで紹介されていた「芸術的に美しいスタイルシートを作るためのテクニック」が興味深かったので、簡単にご紹介。

ファイルの命名規則

“main.css"や"style.css"などの安易なファイル名を使用することを避け、ファイルの命名規則は以下のルールに従ってください。

style_all.css
すべてのブラウザとプラットホームに適用されるスタイルシートファイル
style_screen.css
全体レイアウトを定義するメインのスタイルシートファイル
style_screen_IE7.css
インターネット・エクスプローラー7専用のレイアウトスタイルシート。実際にIE7専用のスタイルシートが必須であると言うわけではなく、ファイル命名規則の例であることに注意してください。
style_screen_lt-IE7.css
IE7以前のIE用レイアウトスタイルシート。
style_print.css
印刷用のスタイルシート

上記は一例に過ぎず、必要なら該当するブラウザ、該当する環境用のファイルを作成します。例えばIE6用ならstyle_screen_IE6.cssを作成し、モバイルブラウザ用にはstyle_handheld.cssを作成してください。

章を分ける

メインデザインを受け持つ style_screen.css は機能によって章を分けてください。例えば「表示位置定義」、「文字装飾定義」、「レイアウト定義」、「フォーム」などに分けます。

加えてスタイルシートファイルの先頭に目次を作成します。目次を見て修正位置の目処が付けば、検索（Ctr+F、もしくはMac+F）機能を使って目的の章に移動できるはずです。

/* The stylesheet is divided into sections :
 * 1. Positioning
 * 2. Typography
 * 3. Layout Styles
 * 4. Forms
 *
*/

/**  = POSITIONING  **/
body {
	font-family: Arial, Helverica, Verdana, sans-self;
	font-size:62.5% ;
	}

章立ての一例を以下に示します。

表示位置定義

ヘッダー、メインコンテンツ、サイドバー、およびフッターの基本的なレイアウトを決定します。最初は大まかな定義で構いません。

文字装飾定義

ヘッダー(h1/h2など)、Pタグ(パラグラフ)のスタイル、リスト構造、引用（blockquotes）、および文章の装飾を定義します。

レイアウト定義

表示位置や文字装飾は定義済みなので、ここではサイトレイアウトの詳細を定義します。

長くなりやすいセクションなので、必要によって定義を小分けしてください。適切な階層構造を保てば、レイアウト定義を行いやすくなるはずです。

その他のセクション

例えばCMS特定のコードなど、必要ならどんどんセクションを増やします。これにより、後日CSSのデバッグが必要になったときにラクができます。

インデントと階層構造

最上位のエレメントはインデントせずに記述し、そのエレメントの子要素はインデントして記述します。

#sideber .subscribe {
	margin: 20px 0 0 0;
	display: block;
	overflow: hidden;
	height: 1%; }

	#sideber .subscribe ul { }

		#sideber .subscribe ul li {
			float: left;
			padding: 0 0 0 10px ; }

			#sideber .subscribe ul li a {
				padding: 4px 0 4px 30px
				display: block;
				width: 120px; }

#sideber .search {
	overflow: hidden;
	margin: 10px 0 35px 0;
	display: block;
	height: 1%; }

インデントにより見た目が美しくなるだけでなく、問題がある場合に修正箇所を発見するのが容易になります。例えば検索ボックスに問題がある場合、関連するコードは「レイアウト定義」の「サイドバー階層」にあります。適切な階層構造を保てば、あなたが探したい場所を見つけ出すの簡単になります。

空白やタブによりファイルサイズが肥大化しますが、実際に使用するCSSファイルを圧縮してしまえば問題になりません。

アルファベット順にせずカテゴリで分ける

メンテナンスを容易にするために、CSSプロパティをアルファベット順にすることを提唱する人もいますが、私はお勧めできません。

例えばこれを見てください。

selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;

padding: 10px;
margin: 5px;

background: #000;
border: 1px solid #222;
}

上記では文字装飾定義、マージン定義、カラーリングがブロック分けして定義されています。

でもこれがアルファベット順だとどうなるでしょう？

selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}

お分かりのように、CSSの読みやすさが格段に低下します。私は普段、最初にポジションプロパティを定義し、次に文字列装飾を定義し、最後にスペーシングやその他の定義を行っています。

まとめ

ここまでを読んでお分かりになると思いますが、そんなに複雑なことは行っていません。こんな簡単なことでも、最前線に立つ開発者達にとっては大きな助けになることでしょう。美しいスタイルシートを保つことが、コード最適化への第一歩です。