CSS&SASSのコーディングガイドライン

CSSをコーディングするための基本的なルールについてと考え方を中心にまとめました。
CSSはとても難しいです。
とくにコーディングのルールが決まってないとメンテナンス性が悪くなりCSSのファイルサイズが膨大になってしまいパフォーマンスが下がる原因の一つになります。

そうならないようにどう作るのかの基本となるルールを説明します。

CSSコーディングルール

基本的に決めるルールはHTMLと同じです。
少し違うのは命名の規則です。

まずは基本的なコーディングルールを書いていきます。
記述のルールとして以下を基本とします。

  • セレクタ名のと『{』波括弧の間は半角１スペースとする。

    1
    セレクタ名 { //波括弧前半角１スペース

  • 波括弧の始まりで改行し閉じ括弧はセレクタの頭のい揃える。

    1
    2
    3
    セレクタ名 {
      ...省略
    } //括弧位置を揃える

  • インデントはプロパティ前のみとし半角２スペースとする

    1
    2
    3
    セレクタ名 {
      プロパティ: 値; //インデント半角２スペース
    }

  • 「,」「:」「,」などの記号は前に文字列がある場合はそのすぐ後ろにつけ記号の後ろに半角１スペース空ける。記号の前は空けてはならない。

    1
    2
    セレクタ, セレクタ //カンマ
    プロパティ: 値; //コロン・セミコロン

  • 各セレクタとセレクタのブロック間は1行空けること

    1
    2
    3
    4
    5
    6
    7
    セレクタ名 {
      ...省略
    }
    　　　     //1行空けること
    セレクタ名 {
      ...省略
    }

  • 要素を持ったclassセレクタは基本使用しない。

    1
    p.text { //要素をもったセレクタは使用しない。

  • 「擬似セレクタ」「!important」は基本使用しない。

以下のように複数セレクタがある場合は上記ルールに従い記号の後ろに半角スペースを入れた上で改行する。

1
2
セレクタ名,
セレクタ名

CSSのコメントの記述方法は以下のようにする。
また「一行コメント」以外は上下に空行を１行いれること。

1
2
3
4
5
6
7
8
9
10

/*
 * パーツやカテゴリなどの大きな区切りのコメント
 */

/**　スタイル説明用コメント　 **/

セレクタ名 {
  プロパティ: 値; /* 一行コメント */
}

これは一例ですが、
このような基本的なコーディングルールを決めることで、
わかりやすくなり誰でもメンテナンスができるようになります。

CSSの命名規則について

命名規則とはIDやクラスの名前付けのルールです。
基本的には以下のようなことを決めます。

  • 文字と文字の接続方法
    例えばローワーキャメルケースで書くとか「-」「_」でつなぐとかです。

  • セマンティクスであること

以上のようなことを決めていきます。
実際にどう考えどうつくるのでしょうか？

セマンティクな命名

HTMLの設計にも深く関わることですがID名やクラス名を決めるときにどう考えて決めていますか？
私はHTMLの文脈（コンテキスト）を元にセマンティクスになるように決めています。
例えば以下のようなボタンのマークアップの場合は


HTML

1
<a>ボタン</a>

以下のようにします。


HTML

1
<a class="button">ボタン</a>

CSS

1
2
3
4
5
.button {
  display: block;
  padding: 8px 16px;
  border-radius: 3px;
}

例えばこのボタンが「青いボタン」だったら以下のようにします。


HTML

1
<a class="buttonBlue">ボタン</a>

CSS

1
2
3
4
5
6
7
.button {
  display: block;
  padding: 8px 16px;
  border-radius: 3px;
  background-color: blue;
  color: white;
}

ですがこれでは何のボタンかわかりません。
このボタンを押すと「Facebookへのリンク」するボタンだとします
なので以下のようにします。


HTML

1
<a class="facebookButton">ボタン</a>

CSS

1
2
3
4
5
6
7
.facebookButton {
  display: block;
  padding: 8px 16px;
  border-radius: 3px;
  background-color: blue;
  color: white;
}

これでセマンティックよりセマンティックスになりました。
ですがこれでは「Facebook」用のボタンとなり汎用性は全くありません。
このようなパーツが増えていくと汎用性がなくなりCSSが崩壊しカオスな状態になります。
これを防ぐ為にモダンCSSを使用することで解決します。
その入門としてまずは「OOCSS(Object Oriented CSS)」を使用し解決してみましょう。

先ほどのコードをもう一度見てみましょう。


HTML

1
<a class="buttonFacebook">ボタン</a>

これでは汎用性が全くないパーツです。
OOCSS(Object Oriented CSS)ではこう書きます。


HTML

1
<a class="button facebook">ボタン</a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
/** 共通部分 **/
.button {
  display: block;
  padding: 8px 16px;
  border-radius: 3px;
}

/** 個別部分 **/
.button.facbook {
  background-color: blue;
  color: white;
}

なをどうしたかというと
「.button」という共通部分（クラス部）と「.button.facebook」個別のスタイルの部分に分割しました。
ここで重要なのは共通クラスです。
共通クラスをつくるこてで例えば別の用途のボタンが出てきても汎用的に使用することができます。

この共通クラスという考えはあとでとても重要になるのでしっかり覚えておいてください。

共通クラスについて（OOCSS）

共通クラスとはCSSオブジェクトのことです。
いきなりCSSオブジェクトと言われても何？と思う方も多いとおもます。

「Object Oriented」とは「オブジェクト指向」のことです
ここでいうオブジェクト指向はオブジェクト指向のごく一部にすぎません
オブジェクト指向の考えを応用したCSSの考え方です。

CSSオブジェクトとは、HTMLでも言いましたが「おもちゃのブロック」です。
１つのブロックがCSSオブジェクトです。
それを組み合わせたものがパーツになります。

HTMLの構造とCSSの命名は一緒に考えなければいけません。
どちらかがおかしかったらページが論理上なりたたなくなり、HTMLもCSSも崩壊しカオスなページになってしまいます。

そうならないためにもしっかりとした命名規則を考え作りましょう。
詳しくはCSSの設計で書いています。

SASSのコーディングルール

基本的に最新版の「SASS」を使用します。
記述方法は「SCSS」を使用します。
「Ruby」でのビルドはせず「タスクランナー」によるビルドを行います。

記述方法の基本はCSSと同じですがSASS特有な書き方や機能についてのルールは以下のようにします。

  • 基本は入れ子で書いていく。
  • 親要素を継承する場合（OOCSS）は「&」を使用する。
  • 「@extend」はむやみに使わず「CSSオブジェクト」のみに使用しSASSの機能の「プレースホルダ」を使用する。
  • SASSのテンプレート「Compass」は使用してもいいがCSSスプライトに限る(Compassの更新が遅いため)。
  • 「@mixin」「@function」は必ず別ファイルに分けて記述し「@import」して使用する。
  • 入れ子になりすぎないようにする。最高でも３つまでとする。(@at-rootを使用する場合は別)

このようなことを決めていく。
SASSの詳しい記法についてはSASSの基礎ページで説明しています。