• gulp-sass
• gulp-autoprefixer(またはgulp pleeease)

必ずCSSプリプロセッサを使用すること。
compassは高機能だが、あまりにもコストがかかりすぎるので使用しない。

壊れない完璧な設計を求めるのではなく、壊れたときに勇気を持って修復できる設計を

完璧なCSS(保守性・拡張性・再利用性など)を追い求めても、
結局のところ答えはなく、であれば最小限度のルールと分類をして
なにがどこに分類され、各要素の関連性などを定義したもので運用するのが1番かと思う。

「これがのちにサイト全体の共通になるから、こう設計する」これも重要なことだが、
それは非常に時間がかかるうえに、あまり現実的でない気がする。
(将来起きるであろう未知数なスケールに耐えられる設計はまず不可能)

難解・細かすぎるルールは覚えられないし、続かないので、
ここでは「分類・詳細度管理」に特化したゆるめのルールを考える。

• sassなどのメタ言語は使うが、あまり頼りすぎないこと
  →extendは使用するが、ルール（制限）を設ける

• cssファイルはブロック・機能ごとにわける
  →めんどいけど、全体把握（ブロック数など）に便利

• ネストは極力控える →BEMを意識したclass命名

• idは使用しない

• 下記のレイヤー思想に基づくこと

7つのレイヤーに分けて考える。
各レイヤーはそれぞれ役割が決まっており、読み込み順番も以下の通りに読み込むこと。
読み込まれる順番が遅いものほど、優先度が高くなり具体的なコードになる。
読み込まれる順番が早いものほど、「変更・修正」には気を払わないといけなくなる ため、慎重に定義する。

├── _setting/　・・・設定・定義レイヤー
│   ├── _vars.scss
│   └── _mixin.scss
│
├── _foundation/　・・・下地レイヤー
│   ├── _reset.scss
│   └── _base.scss
│
├── _helper/　・・・微調整レイヤー
├── _component/　・・・コンポーネント（部品）レイヤー
├── _module/　・・・モジュール（パーツ・塊）レイヤー
├── _unique/　・・・固有レイヤー
└── _page/　・・・各ページレイヤー

ここではスタイリングではなく、サイト全体の設定・定義を行う。

サイト全体で使用する「色・幅（メディアクエリなど）・フォント関連 etc」など、
変数情報を記述する。

$color-primary: #000;
$header-h: 50px;

mixinの定義。

@mixin cf(){}

サイトの下地を記述する。ここではtagに対してのみスタイリングをかける。

ブラウザリセット。

各tagの初期設定を書く。
body, img, a, liなどタグに対して記述(class指定などは書かないこと。)

body{}
img{}
a{}

あくまでもヘルプ的な立ち位置であり、乱用は控える。
目的は「微調整」であり、classプレフィックスは「h-」。

• display（レスポンシブのpc/sp切り替え）
• margin / padding などの余白系（非推奨）

.h-displayPC{}
.h-displaySP{}

サイト全体で使い回す「小単位」のスタイル。
これらは全てplaceholderで定義し、classとしてcss上に残さない。
placeholderプレフィックスは「c-」。
このレイヤーに入れる条件・ルールとしては・・・

• 小単位（それ以上分解できない単位が望ましい）
• 自身が独立して使われ、自身に依存する要素（element）はない（あれば、それはcomponentレイヤーに）
• 自身にfloat,positionなどの位置系スタイルは避ける。どこでも使用できるようにする。
• component同士は疎結合で、お互いを知らないようにする
• ファイル内でのextendは許容

例でいうと、iconfont関連や、imgに対するスタイル関連など。
かなり小単位で限定的なので、実際はこのレイヤーは厚くはならない（はず）。

%c-icon--logo{}

サイト全体で使い回すブロック単位の中〜大単位のスタイル。
componentと違う点は、moduleは塊であること。
いくつかのmoduleであったり、パーツを持ち、それらをまとめ上げるもの。
サードパーティのjsに付属するcssもここに分類すること(slider, modal...)。 classプレフィックスは「m-」。

• いくつかの要素（モジュールなど）をもつ集合体

.m-titleIcon{}

サイト全体を通して、「使い回さない・唯一の存在」のもの。
headerやfooterがこれにあたり、このレイヤーもそうそう厚くならない。
全体を囲むwrap(wrapper)もここに当たる。
classプレフィックスは「u-」。

注意点としては、

• かなり具体的で唯一な命名 にすること → navはNG。globalNavはOK。
• 容易にこのレイヤーにいれない
  → moduleとの違いが若干似ており、のちにmoduleに・・という流れが十分起こりうるので、
  少しでも「複数でてくる」可能性があるなら、無理にこのレイヤーにいれない。（moduleへ）

.u-header{}

ページ固有のスタイル。
もっとも優先度が高く、細かなスタイルを含め記述するレイヤー。

また最下流のレイヤーにあたるので、変更・修正の影響範囲は浅い(重要性でいえば、低い)。
そのため、classプレフィックスは「なし」。

各ページcssは「.page{{Name}}」でネストしてから使用する。

.page-top{
    .mainVisual{}
}

親のブロックを決め、それを継承していく命名規則。

• 名前のバッティング、詳細度、可読性のため
• それ以上分解できない要素はclassを省略（imgなど）
• 深く（elementが深く）なる場合は、名前の継承を少し省略する
• modifierの繋ぎは「--」にする

<div class="u-header">
    <h1 class="u-header_logo">
        <img />
    </h1>
    <nav class="u-header_nav">
        <li class="u-header_nav_item">
            <!--u-header_nav_item_linkのitemを省略-->
            <a class="u-header_nav_link"></a>
        </li>
    </nav>
</div>

単語の区切りはlowerキャメルケースを使用すること、
ハイフンはレイヤープリフィクスやmodifierに使用しており、ややこしいので、
単語の区切りにハイフンは使用しない。

<div class="m-itemNav_list"></div>

jsによって制御されるような状態クラス。
「is-」を使用したマルチクラスに。

<p class="btn is-active"></p>

jsに起点になることを明記。
「js-」を使用したマルチクラスに。
スタイルは当てない。

<p class="btn js-modal"></p>

基本的にネストを制限して、詳細度をシンプルに保つことが重要だが、
ネストを使用しないと、あまりにもしんどすぎるケースは許容。
ただし、その上でもなるべくネストを抑えるようにすること。

.btn{
    &.is-hover{
        .btn_link{
            color: #f00;
        }
    }
}

//もしくは
.btn.is-hover{
    .btn_link{
        color: #f00;
    }
}

.list_item{
    &:last-child(){}
}
.pic{
    &:before{}
}

.pageTop{
    .mainVisual{}
}