CSS を書くときの自分ルール

CSS を書くとき、自分ルールに従って書くと分かりやすいよ、というお話。

改行やインデントのルール

改行やインデントのルールを決めておくだけでも、結構見やすくなります。私は基本的にはこんな感じで書いています。

  • セレクタと「{」の間に半角スペース1つ。
  • プロパティは Tab でインデントし、1つのプロパティにつき1行。「:」や「;」の間にスペースは開けない。
  • 複数のセレクタを指定する際は1つのセレクタにつき1行で改行していく。
  • それぞれの間を1行空ける。

実際に書くと、こんな感じになります (このページでは Tab インデントを半角スペース4つ分で置き換えています)。

p {
    margin:30px 0;
}

h1,
h2,
h3 {
    color:#f00;
    font-weight:bold;
}

「:」や「;」の間にスペースを入れた方が見やすい、と思えば、そこは「自分ルール」ですので自由に決めてみてください。

最初に全称セレクタでデフォルトスタイルを消す

最初にデフォルトスタイルを消しておくことで、ブラウザごとの表示差異に悩まされる心配をなくします。

セレクタは構造に関係ないものを先に書く

CSS は、あとから書いたセレクタのスタイルが優先されるので、先に構造に関係のないもの (class や id を含まないもの) を書いてしまいます。

こうすることで、あとから書いた特殊なスタイルは、先に書かれた構造に関係のないものを上書きして適用されます。

要素は XHTML Abstract Modules の順に書く

これは、特に class や id を付けていない要素を書くときの順番です。XHTML Abstract Modules の順番に沿ってセレクタを記述していくと、統一性が出ます。

いちいちページを見て確認するのは面倒なので、要素の順番をまとめました。これを元に、普段使わない要素は消して、自分用のリストを作っておくとよいでしょう。

  • Structure Module : body html head title
  • Text Module : abbr acronym address blockquote br cite code dfn div em h1 h2 h3 h4 h5 h6 kbd p pre q samp span strong var
  • Hypertext Module : a
  • List Module : dl dt dd ol ul li
  • Applet Module : applet param
  • Presentation Module : b big hr i small sub sup tt
  • Edit Module : del ins
  • Bi-directional Text Module : bdo
  • Forms Modules : form input label select option textarea button fieldset label legend optgroup
  • Table Modules : caption table td th tr col colgroup tbody thead tfoot
  • Image Module : img
  • Client-side Image Map Module : area map
  • Object Module : object param
  • Frames Module : frameset frame noframes
  • Iframe Module : iframe
  • Metainformation Module : meta
  • Scripting Module : noscript script
  • Style Sheet Module : style
  • Link Module : link
  • Base Module : base
  • Legacy Module : basefont center dir font isindex menu s strike u

セレクタは HTML ファイルで出てくる順に細かく指定

class や id 付けがされているセレクタは、HTML ファイル内での出現順に、細かく指定していくと分かりやすいです。

例えば以下のような HTML があったとしたら、

<html>
 <head>
  <title>Sample</title>
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <h1>Page Title</h1>
   </div>
   <div id="body">
    <h2>Section</h2>
    <p>Paragraph</p>
   </div>
   <div id="footer">
    <address>Address</address>
   </div>
  </div>
 </body>
</html>

CSS の方では、文脈セレクタを使って順に書いていきます。

div#wrapper { }
div#wrapper div#header { }
div#wrapper div#header h1 { }
div#wrapper div#body { }
div#wrapper div#body h2 { }
div#wrapper div#body p { }
div#wrapper div#footer { }
div#wrapper div#footer address { }

他にも、CSS を HTML と同じ構造にインデントしてしまう方法もあります。

div#wrapper { }
  div#header { }
    div#header h1 { }
  div#body { }
    div#body h2 { }
    div#body p { }
  div#footer { }
    div#footer address { }

プロパティは CSS2 Specification の順に書く

プロパティも、記述する順番が決まっていると分かりやすいです。CSS2 Specification の順番に書くと分かりやすいでしょう。

以下に、全プロパティを並べました。自分が普段使わないプロパティは消して、自分用のリストを作っておくとよいでしょう。

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-width
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  • border-color
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • border-style
  • border-top
  • border-bottom
  • border-right
  • border-left
  • border
  • display
  • position
  • top
  • right
  • bottom
  • left
  • float
  • clear
  • z-index
  • direction
  • unicode-bidi
  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height
  • line-height
  • vertical-align
  • overflow
  • clip
  • visibility
  • content
  • compact
  • run-in
  • quotes
  • marker-offset
  • list-style-type
  • list-style-image
  • list-style-position
  • list-style
  • size
  • marks
  • page-break-before
  • page-break-after
  • page-break-inside
  • page
  • orphans
  • widows
  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • font-size-adjust
  • font
  • text-indent
  • text-align
  • text-decoration
  • text-shadow
  • letter-spacing
  • word-spacing
  • text-transform
  • white-space
  • table-layout
  • empty-cells
  • speak-header
  • cursor
  • outline
  • volume
  • speak
  • pause-before
  • pause-after
  • pause
  • cue-before
  • cue-after
  • cue
  • play-during
  • azimuth
  • elevation
  • speech-rate
  • voice-family
  • pitch
  • pitch-range
  • stress
  • richness
  • speak-punctuation
  • speak-numeral

省略プロパティが使える場合は極力使う

これはまったく逆の意見の人も多いです。使っていて見やすい方で構わないでしょう。私は省略プロパティを使う派ですw。

省略プロパティは記述のルールを忘れがちなので、よく使われるであろう省略プロパティの記述ルールをまとめました。margin と padding はよく使いますね。

margin・padding・border-width・border-color・border-style

これらのプロパティには4つの値の書き方があります。ここでは margin を例にして説明しています。

margin:10px; (値の指定が1つ)

上下左右の4辺とも同じ値になります。

margin:10px 20px; (値の指定が2つ)

上下辺 (10px)、左右辺 (20px) という指定になります。値と値の間をスペースで区切りましょう。

margin:10px 20px 30px; (値の指定が3つ)

上辺 (10px)、左右辺 (20px)、下辺 (30px) という指定になります。

margin:10px 20px 30px 40px; (値の指定が4つ)

上、右、下、左、の「時計回り」の順で指定されます。Top、Right、Bottom、Left という順番から、TRouBLEd (トラブルド) という覚え方もあります。

border-top・border-right・border-bottom・border-left・border
  • border:[border-width] [border-color] [border-style];

どのプロパティでもルールは同じで、値は順不同、3つの値が指定されていれば OK です。

list-style
  • list-style:[list-style-type] [list-style-image] [list-style-position];

値は順不同で、3つとも書く必要はありません。書かなかった値はデフォルト値 (初期値) が指定されたものと見なされます。各値の初期値は以下のようになっています。

  • list-style-type : disc (円形のマーカーを使う)
  • list-style-image : none (画像をマーカーとして使わない)
  • list-style-position : outside (マーカーをリストアイテムボックス外に配置)

また、none の値は list-style-type と list-style-image のどちらにもある値ですが、list-style でこの値を指定すると、両方に none が指定されたものと見なされます。

background
  • backgorund:[backgorund-color] [backgorund-image] [backgorund-repeat] [backgorund-attachment] [backgorund-position];

値は順不同で、すべてを指定する必要はありません。書かなかった値はデフォルト値が適用されます。つまり、

#foo {
    background-image:url("background.png");
    background:#fff repeat-x fixed top left;
    }

のように指定してしまうと、background-image の背景画像の指定は無効となってしまいます。各値の初期値は以下のようになっています。

  • backgorund-color : transparent (背景色を透過させる)
  • backgorund-image : none (背景画像を表示しない)
  • backgorund-repeat : repeat (背景画像を縦横方向に繰り返し)
  • backgorund-attachment : scroll (背景画像を固定しない)
  • backgorund-position : 0% 0% (背景画像を左上に配置)
font
  • font:[font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

font プロパティは、個人的には一番記述ルールが面倒な省略プロパティだと思います。

  • 1~3番目 [font-style] [font-variant] [font-weight] までの値は順不同
  • [font-size]/[line-height] は、間をスラッシュ「/」で区切って続けて書く
  • [font-size] と [font-family] 以外は省略化。省略した値はデフォルト値が適用される
  • font プロパティでは値を指定できないが、font-size-adjust・font-stretch の両プロパティにも初期値が適用される

というルールになっています。各値の初期値は以下のとおりです。

  • font-style : normal (斜体にせず通常体で表示)
  • font-variant : normal (スモールキャピタルを使わない通常表示)
  • font-weight : normal (太字にせず400程度の標準で表示)
  • font-size : medium (標準サイズ・省略不可)
  • line-height : normal (標準の行間)
  • font-family : User-Agent の設定に依存 (省略不可)
  • font-size-adjust : none (フォントサイズ調整をしない)
  • font-stretch : normal (フォントの字幅を変えない)

リンクの擬似クラスの順番は「LoVe HA?」

覚え方は「LoVe / HAte」(ラブ / ヘイト) などの違う覚え方もあるようですが、要するに、リンクの擬似クラスは

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

という順番で書きましょう、ということです。これ以外の順番だと、スタイルがまともに動作しないことがあります。

また、focus を使用する場合は、

  1. a:link
  2. a:visited
  3. a:hover
  4. a:focus
  5. a:active

という順番になります (LVHFA)。

値の数字について

値の数字について、「0」には単位をつける必要はありません (どの単位でも0は0ですから)。その他の数字には必ず単位をつけましょう。

line-height は例外で、単位をつけずに数字だけで指定するべきです。単位をつけてしまうと行ボックスの高さがおかしくなってしまいます。

ガイドラインを作ってルールを統一する

これらを参考にして自分ルールを作ったら、きちんとまとめておきましょう。CSS のファイル内にコメントとして、ルールをメモしておくのが簡単な方法です。

参考文献