CSS - AtNight-github/Guideline Wiki

環境

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

思想

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

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

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

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

基本ルール


ファイル構造

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

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

1.SETTING レイヤー

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

var.scss

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

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

mixin.scss

mixinの定義。

@mixin cf(){}

2.FOUNDATIONレイヤー

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

reset.scss

ブラウザリセット。

base.scss

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

body{}
img{}
a{}

3.HELPER レイヤー

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

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

4.COMPONENT レイヤー

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

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

%c-icon--logo{}

5.MODULEレイヤー

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

.m-titleIcon{}

6.UNIQUEレイヤー

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

注意点としては、

.u-header{}

7.PAGEレイヤー

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

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

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

.page-top{
    .mainVisual{}
}

CLASS命名規則

BEM(block_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に起点になることを明記。
「js-」を使用したマルチクラスに。
スタイルは当てない。

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

ネストを許容するケース

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

ステートがつく場合

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

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

child, nth, typeof系, 疑似要素(after.before)

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

ページレイヤーでのネスト

.pageTop{
    .mainVisual{}
}

extendの使用制限・ルール


この設計におけるメリット・デメリットなど