CSSガイドライン - いろいろ試行錯誤

CSSガイドラインの構成例

CSSのバージョン／文字コード

CSSの整形ルール

CSSファイルの内容構成

CSSファイル内の「ファイル構成」記述例

@charset "UTF-8";
/* ---------------------------------------- 目次 */
/* ファイル情報 */
/* ブラウザ初期化スタイル */
/* 汎用クラススタイル */
/* 領域定義スタイル */
/* 領域別スタイル */

/* ---------------------------------------- ファイル情報 */
/* Page Layout CSS v1.02 */
/* ファイル名：page-layout.css */
/* 作成日：2008年8月23日 */
/* 更新日：2008年12月24日 */
/* 作者: Maya Uegaki */

/* ---------------------------------------- ブラウザ初期化スタイル*/
body {
  margin:0;
  padding:0;
}
/* ～以下略～ */

CSSファイルの管理方法

ワンシートアプローチ	メリット:一元管理／デメリット:コードが長くなりすぎる
マルチシートアプローチ	ブラウザの振り分けに使用する「フィルタ用CSS」や、ブラウザのデフォルトスタイルをリセットする「リセットCSS」、「ハック用CSS」など、役割ごとにファイルを分割して管理

セレクタのルール

セレクタマップの例

body
│
└div#wrapper /* 全体を囲む */
　　│
　　├div#header /* ヘッダ */
　　｜　└hl / div /* トップページはh1、それ以外はdiv */
　　｜　　｜　　└a
　　｜　　└───┴img /* ロゴ画像 */
　　├div#globalnavi /* グローバルナビ */
　　｜　└ul
　　｜　　└li
　　｜　　　└a
　　├div#content /* コンテンツ */
　　｜　├ul#topicpath /* パンくずリスト */
　　│　│└li
　　│　│　└a
　　│　├h1/h2/h3
　　│　├p
　　│　│└a/img/em/strong/span
　　│　└p.pagetop /* ページトップへのナビ */
　　└div#footer /* フッタ */
　　　　├ul /* サイト内共通リンク */
　　　　│└li
　　　　│　└a
　　　　└address /* コピーライト */

プロパティのルール

記述順序

/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 */

値のルール

単位についてのルールの例

サイズを可変にするため、font-sizeやline-height指定する場合は、emまたは「%値」を使う

CSSハックのルール

使わないで済むのであれば、極力使用しない方が望ましい
「CSSガイドライン」に明記
- 「CSSの書式上、妥当なものを使用する」「他のブラウザに影響を与えない」など
- どのブラウザのどのような不具合に対してどのようなCSSハックを適用しているのか
- どのCSSファイルのどこで、そのCSSハックを記述しているのか