FLOCSSとの関係
echo.cssのCSS構成は、FLOCSSを参考にしています。
https://github.com/hiloki/flocss
基本的にはFLOCSSと同様のレイヤー構造と命名規則を持っていますが、以下の点が異なります。
ヘッダ・フッタがlayoutではなくprojectに属する
プロジェクトごとに変更されるファイルを出来る限り少なくする目的で、ヘッダ・フッタはレイアウト扱いにはしていません。
グリッド（段組）がcomponentではなくlayoutに属する
後述のlayoutの定義に添って、移動しています。
componentの一部をmoduleに分離
componentに属するSCSSファイルが多くなりすぎる問題を回避すると同時に、Atomic Designの構造を反映しています。
ファイル構造
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _container.scss
│ ├── _document.scss
│ └── _grid.scss
└── object
├── component
│ ├── _alert.scss
│ ├── _box.scss
│ ├── _card.scss
│ └── ...
├── module
│ ├── _btn.scss
│ ├── _checkbox.scss
│ ├── _embed.scss
│ └── ...
├── project
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── ...
└── utility
├── _bg.scss
├── _clear.scss
├── _expand.scss
└── ...各レイヤーの役割
foundation
クラスではなく、各要素そのものに対して基本的なスタイルを定義します。
プロジェクトごとの変更は極力避けます。
layout
視覚的な機能を持たない、サイトのレイアウトに関するクラス群です。クラスには初期状態で .l- の接頭辞が付けられます。
プロジェクトごとの変更は極力避けます。
object
objectは4つの子レイヤーを持ちます。
module
サイト内で、最小単位となる機能を持ったパーツのクラス群です。クラスには初期状態で .m- の接頭辞が付けられます。
Atomic DesignのAtomsに準じます。
component
サイト内で、module がひとつ以上含まれる可能性があるパーツのクラス群です。クラスには初期状態で .c- の接頭辞が付けられます。
Atomic DesignのMoleculesに準じます。
project
そのプロジェクトのデザインや機能に大きく影響するパーツのクラス群です。module と component が含まれる可能性があります。
ブログの本文用CSSなど、採用するCMSに直結するCSSがある場合もここに含まれます。クラスには初期状態で .p- の接頭辞が付けられます。
Atomic DesignのOrganismsに準じます。
utility
文字サイズ、余白、外観などをその要素のみで調整するための補助クラスです。クラスには初期状態で .u- の接頭辞が付けられます。