CSS (Sass) のコーディングルール #CSS #Sass version 1
:追加された部分
:削除された部分
(差分が大きい場合、文字単位では表示しません)
CSS/SCSSコーディングルール #CSS #SASS
2016/3月現在の個人的(あるいはテンマド社の)CSS/SCSSコーディングについてのルール
# 目指すこと
* 開発時に「迷う」「考える」部分を極力減らしつつ、できるだけ一貫したCSSを書けるようにする
# 前提
# ルール
## 命名規則
### IDを使用しない
### クラス名はハイフン区切りで全て小文字
### JSのみで使うクラスは「.x-」で始め、CSS側でそのクラスは絶対に使わない
後述の「.mode-」のついたクラスでコントロールします。
### JSとのやりとりは「.mode-」というクラスで行う
## クラスのネストは2段階まで、を基本とする
## ファイル分け
### クラス名の接頭辞と、そのクラスの書かれたファイル名を一致させる
どのクラスがどのファイルに書かれているか、を明快にするためです。
sourcemapなどに頼る必要が発生したら負けです。
## SASSの変数名はスネークケースで書く
単純に、SASSだと「-」(マイナス)が演算子としても機能するので、それとの区別をつけてるため、ハイフンは使いません。
## SASSの変数名は
# その他
## BEMなどを使わない理由
ルールとして過剰に複雑なことと
モジュールのつもりで書いていたものの中のパーツをモジュール化したくなったり、
2016/3月現在の個人的(あるいはテンマド社の)CSS/SCSSコーディングについてのルール
目指すこと
- 開発時に「迷う」「考える」部分を極力減らしつつ、できるだけ一貫したCSSを書けるようにする
前提
ルール
命名規則
IDを使用しない
クラス名はハイフン区切りで全て小文字
JSのみで使うクラスは「.x-」で始め、CSS側でそのクラスは絶対に使わない
後述の「.mode-」のついたクラスでコントロールします。
JSとのやりとりは「.mode-」というクラスで行う
クラスのネストは2段階まで、を基本とする
ファイル分け
クラス名の接頭辞と、そのクラスの書かれたファイル名を一致させる
どのクラスがどのファイルに書かれているか、を明快にするためです。
sourcemapなどに頼る必要が発生したら負けです。
SASSの変数名はスネークケースで書く
単純に、SASSだと「-」(マイナス)が演算子としても機能するので、それとの区別をつけてるため、ハイフンは使いません。
SASSの変数名は
その他
BEMなどを使わない理由
ルールとして過剰に複雑なことと
モジュールのつもりで書いていたものの中のパーツをモジュール化したくなったり、