はじめに
コンポーネントの考え方の自由度を高くして、いろいろなスケールのプロジェクトに合わせることができるCSS設計を考えた。
- OOCSSやSMACSSのようなオブジェクト指向ではなく、ECSSの考えをベースにした。
- コンポーネントは抽象化を避け、管理しやすさを重視する。
- COMPONENTS／ELEMENTS／VARIANTで構成する。
- ファイル管理で文脈がわかるようにする。
COMPONENTS
- 全てのUIパーツをコンポーネントで構成する。
- ２ワードをハイフン（-）で繋いで命名する。
- キャメルケース（camelCase）にすれば１ワードとしてカウント。
- コンポーネントごとにscssファイルを分けて管理する。
component-sample.scss
.component-sample { ... }
ELEMENTS
- コンポーネントの子要素。
- コンポーネント名とアンダースコアでつなぐ。（BEMのElementのように）
- １ワードで命名する。
- ハイフンから始まる１ワードで命名する。
- 親コンポーネントと同じscssファイルに含める。
component-sample.scss
...
.component-sample_element { ... }
VARIANT
- コンポーネントやエレメントの変種・バージョン違い。
- 複数のヴァリアントを併用して良い。
- 必ずコンポーネントやエレメントとセットで使用する。単独で使用しない。
- エレメントのような使い方はしない。
component-sample.scss
.component-sample {
&.-variant { ... }
}
.component-sample_inner {
&.-black { ... }
}
//NG
.-large { ... }
//NG
.component-sample {
.-element { ... }
}
ディレクトリ構造
それぞれを別のフォルダにして、上から順に読み込む。
RESET
CSSのリセット。あらゆるプロジェクトであらかじめ設定しておいた方が良いスタイル。
(DEVELOP)
開発用のレイヤー。実際のコードにならないscssの変数やmixinなどを入れる。
色、文字サイズ、z-index、要素の高さと幅、アイコンフォント、レスポンシブ設定などを書く。
BASE
基本設定。このファイルはHTMLタグに直接スタイルを書いてよいこととする。
例えば、htmlタグに全体に適応される文字設定を書いたりする。
COMPONENTS
全てのUIパーツ。
なるべく共通化を避け、機能ごとに分類するようにする。
プロジェクトの要件に合わせ、componentsフォルダ内で分類できる。複数のレイアウトの種類がある場合はlayoutフォルダ内で管理したり、画面のカテゴリでフォルダをつくったり、文脈が分かるように整理する。
例
sample
_scss
├── _base
│ └── _base.scss
├── _components
│ ├── _button-pageTop.scss
│ ├── _category_menu.scss
│ ├── _category_title.scss
│ ├── _common
│ │ ├── _common-footer.scss
│ │ └── _common-header.scss
│ ├── _global-navi.scss
│ └── _main-visual.scss
├── _develop
│ ├── _breakpoints.scss
│ ├── _color.scss
│ ├── _font.scss
│ ├── _mixin.scss
│ ├── _print.scss
│ ├── _size.scss
│ └── _zindex.scss
├── _reset
│ └── _reset.scss
└── common.scss
その他のルール
推奨
- モバイルファースト。基本的にmin-screenのみを使用してレスポンシブを切り替える。
- 色や文字、サイズなどは全てscssの変数とし、_developフォルダ内で管理する。
- 縦方向のmarginルールを決める。(margin-top派でもmargin-bottom派でも良いが、ルールを決めるのが大事。）
- 文字サイズや余白の単位はremかvwを使用する。pxの使用は推奨しない。
- 要素の高さはできるだけpxで指定しない。ロゴのサイズや、Sass変数で管理した方が良いヘッダーの高さなどは例外。
- gulp-sass-globを使用し、アスタリスク（*）でscssのimportをする。
- 可能な限り言葉を略さない。タイトルは
titleと書きttlと書かない。もし略語を使う時は用語集をつくり共有する。 - 例外箇所はコメントを書き、多くなってきたらプロジェクトとしてのルールを見直す。
禁止
- 抽象度の高い名前は避ける。（例：
.text-1といったクラスは禁止） - scssのextendは使用しない。依存関係が複雑になるため。
- !importantは使用しない。
- HTMLタグに直接スタイルを書かない。（BASEファイルは例外。その他ファイルで書く場合はコメントで例外だとわかるようにする。）
- idにスタイルを書かない。
- 汎用クラスは使わない。（例：いろんなcomponentsを大きくするクラスはつくらない。）
- 接頭辞（Prefix）は使用しない。Componentsの名前で工夫し、略語を使う場合はプロジェクト内で共有する。
まとめ
コンポーネントの自由度を高くした分、コンポーネント内で独自の設計が可能になる。そういうった意味では、メタなCSS設計と言えると思う。大きな（複数人が関わる）プロジェクトではこの設計の上でさらに詳細な設計が必要となるだろう。そういった場合でも下敷きとしてこのCSS設計が役に立つと思う。