2016/3月現在の個人的（あるいはテンマド社の）CSS/SCSSコーディングについてのルール

# 目指すこと

* 開発時に「迷う」「考える」部分を極力減らしつつ、できるだけ一貫したCSSを書けるようにする

# 前提

# ルール

## 前提

### SASSではなく、SCSSの記法を使う

単純に学習コストが低く、JSライブラリ付属のCSSなど、既存のCSSなども取り込みやすいからです

## 命名規則

### IDを使用しない

他の場所でカスケードしてスタイルを上書きしようとした時に障害になるので、IDは使用しません。

### クラス名はハイフン区切りで全て小文字

### JSのみで使うクラスは「.x-」で始め、CSS側でそのクラスは絶対に使わない
大文字小文字を両方使って書く前提にすると、必ずタイプミスでスタイルが当たらなくてうんうん悩む時間が発生するので、大文字は使いません。

### JSから使うクラスは「.x-」で始め、CSS側でそのクラスは絶対に使わない

後述の「.mode-」のついたクラスでコントロールします。

## JSで使うIDは「x」で始め、CSS側でそのIDは絶対に使わない

っていうかIDをそもそもCSSで書かないので関係ないといえばないけどね

### JSとのやりとりは「.mode-」というクラスで行う



## クラスのネストは２段階まで、を基本とする

## ファイル分け

### クラス名の接頭辞と、そのクラスの書かれたファイル名を一致させる

どのクラスがどのファイルに書かれているか、を明快にするためです。
どのクラスがどのファイルに書かれているか、が瞬時にわかるようになります。
sourcemapなどに頼る必要が発生したら負けです。

## SASSの変数名はスネークケースで書く
なお、「_x.scss（あるいは_x-hoge.scss）」と「_mode.scss（あるいは_mode-hoge.scss）」は上述のJSとのやりとりで使う予約語的なものなので、作成禁止です。


### SASSの変数名はスネークケースで書く

単純に、SASSだと「-」（マイナス）が演算子としても機能するので、それとの区別をつけてるため、ハイフンは使いません。

## SASSの変数名は
### SASSの変数名も、ファイル名と一致させる

唯一の例外として、下記のとおり「$g_」で始まるものだけルールが違います

### SASSのグローバル変数は「_vars.scss」に書き、「$g_」で始める



## レスポンシブ対応

今のところ以下のようなコードでやる方向です。

```scss:_mixins.scss
```

※もっとスマートにわかりやすく書ける方法があれば知りたい

# その他

## BEMなどを使わない理由

ルールとして過剰に複雑なことと
モジュールのつもりで書いていたものの中のパーツをモジュール化したくなったり、