CSS(Cascading Style Sheets) コーディングガイドライン

分割した場合の CSS の種類

default.css

全ての文書に読み込ませる CSS。ブラウザごとに違うスタイルをリセットして要素別に見栄えを再定義します。汎用的なクラススタイルも含みます。

font.css

フォントファミリを定義するための CSS です。

layout.css

レイアウトの種類を定義するための CSS です。この CSS の中身で @import 規則を使い、個々のレイアウトを読み込みます。このファイル内では、読み込むファイル名の行のコメントを外して希望のレイアウトを読み込むようにします。

layout.css 内で @import 規則を使って読み込むスタイルの種類の例

• fixed_2column_left_menu.css
• fixed_2column_right_menu.css
• liquid_2column_left_menu.css
• liquid_2column_right_menu.css

microformats.css

microformats に対応したマークアップに応じて読み込む CSS です。

styles.css

レイアウト以外のビジュアル面を詳細に指定する CSS です。色、間隔、行頭アイコンや背景画像など多岐にわたります。

その他

styles.css の１枚では管理が難しいなどの大規模なサイトの場合は規模に応じて CSS の種類を増やすことができます。その場合、一番最後に読み込むべき詳細なスタイルを (X)HTML の link 要素を使って読み込みます。

<!-- (X)HTML 側では styles.css のみを link 属性で読み込みます。 -->
<link rel="stylesheet" href="http://purpr.in/common/stylesheets/styles.css" type="text/css" />
-----------------------------------------------------------------------------------------------------
/* styles.css の冒頭 */               ← 注）実際のファイルには冒頭のコメントはありません
@charset "utf-8";
@import url("default.css");          ↓　最初は一般的なものから
@import url("font.css");             ↓　下に進むほどに、より詳細な指定がされているスタイルを読み込みます。
@import url("layout.css");           ↓　layout.css はさらにレイアウト種類別に分岐しますが、読み込みたいレイアウトのコメントを外すことで
@import url("microformats.css");     ↓　反映させたいレイアウトに調整します。
/* ↓styles.css の本体へ */            ↓　この例の場合、デザインの細かい指定がされているstyles.cssが一番最後に読み込まれます。

統合した場合の CSS の構成

/* 制作者情報 */
/* ブラウザ初期化スタイル */
/* 汎用要素スタイル */
/* 汎用クラススタイル */
/* 構造（ワイヤーフレーム）別スタイル */
/* カテゴリー別スタイル */

インデントと改行

1. 'セレクタ名' + '半角スペース1つ' + '{' + 改行
2. プロパティの記述は、そのセレクタに対して半角スペース4つ分のインデント
3. プロパティ直後のコロン':'の隣に半角スペース1つ
4. 値が複数ある場合は半角スペース1つ区切り
5. 値の終了にセミコロン';' + 改行
6. 閉じ括弧'}'もプロパティのインデントを保持する
7. セレクタ{プロパティ: 値;}のひとまとまりを記述したら１行空ける（ただし、コメント記述の直下は１行空けない）

.selector1 {
    property: value;
    property: value1 value2 value3 value4;
    }

.selector2 {
    property: value;
    property: value1 value2 value3 value4;
    }

HTML の包含関係と同様のインデント

レイアウトを定義するスタイルシート／デザインを定義するスタイルシートにおいては、例に示すように、HTML 内で要素の親子関係が存在した場合にインデントを行い、視覚的にメンテナンスをしやすくします。

ただし、デフォルトスタイルシートでは行いません。

/* Structure */
body {
    width: 100%;
    background-color: #000;
    }

    div#container {
        width: 85%;
        color: #000;
        background-color: #fff;
        }
        ...more

プロパティの記述順序

プロパティの出現する順番は、CSS2 仕様書に出現する順番に沿って記述しようと考えていますが、実際のところ試行錯誤の段階です。

テキストエディタのみの制作の方だけなら良いのですが、オーサリングツールを使っている方を考慮すると指定しづらいことを考慮すると参考程度として厳密に規定しないほうがよいのかもしれません。

selector {
    ボックスモデル　Box model
    視覚フォーマットモデル　Visual formatting model
    視覚フォーマットモデルの詳細　Visual formatting model details
    視覚効果　Visual effects
    生成内容、自動番号付け及びリスト　Generated content, automatic numbering, and lists
    色及び背景　Colors and Backgrounds
    フォント　Fonts
    テキスト　Text
    表　Tables
    ユーザインターフェース　User interface
    }

div.section {
    margin: 0 0 15px 0;
    padding: 8px 10px;
    border: 1px solid #f00;       /* width > style > color */
    display: block;
    position: absolute;
    top :0;
    right: 0;
    bottom: 0;
    left: 0;
    float: none;
    clear: both;
    z-index: 1;
    width: 600px;
    min-width: 400px;
    max-width: 600px;
    height: 300px;
    min-height: 100px;
    max-height: 300px;
    line-height: 1.5;
    vertical-align: middle;
    overflow: auto;
    clip: auto;
    visibility: visible;
    list-style: disc outside;        /* type > position > image */
    color: #000;
    background: #fff url(/images/bg.png) repeat-y fixed top left;       /* color > image > repeat > attachment > position */
    font: normal normal normal 100%/1.5 "ヒラギノ角ゴ Pro W3", verdana, arial, sans-serif;        /* style > variant > weight > size/line-height > family */
    text-indent: 1em;
    text-align: left;
    text-decoration: none;
    letter-spacing: 0.1em;
    word-spacing: 0.1em;
    text-transform: lowercase;
    cursor: pointer;
    }