CSS (Sass) のコーディングルール #CSS #Sass version 1

2016/03/16 18:42 by zk33 zk33
  :追加された部分   :削除された部分
(差分が大きい場合、文字単位では表示しません)
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などを使わない理由

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