FLOCSSとの関係
echo.cssは、CSS設計思想のひとつである「FLOCSS」を参考にしています。
FLOCSSは、CSSクラスが役割ごとに「レイヤー構造」を持っています。echo.cssも、SCSSファイル、および接頭辞の変数が適切なレイヤー構造を持つように設計しています。
https://github.com/hiloki/flocss
echo.cssは理解しやすく、融通が効く設計を優先しています。公開されている状態では、project以外のレイヤーに接頭辞を付与していません。しかし、Sassを使用できる環境ではすべてのレイヤーの接頭辞を変更できます。
_scss/_config_advance.scss の変数 $l, $m, $c, $u, $p が、後述する各レイヤーの接頭辞となっています。
Atomic Designとの関係
Atomic Designとは、コンポーネント単位でウェブサイト内のUIを制作していくデザイン設計思想です。
テキスト・ボタン・ラベル等を最小単位として、それらが含まれるカードやページテンプレートを構築していきます。
Atomic Design自体はコーディングのために作られたものではありませんが、その思想はCSSモジュールに通じるものがあります。
echo.cssはオブジェクトの構造をAtomic Designにならうことで、デザイナーとの意思疎通を容易にしています。
ファイル構造
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _container.scss
│ ├── _document.scss
│ ├── _cards.scss
│ └── ...
├── object
│ ├── component
│ │ ├── _alert.scss
│ │ ├── _box.scss
│ │ ├── _card.scss
│ │ └── ...
│ ├── module
│ │ ├── _button.scss
│ │ ├── _checkbox.scss
│ │ ├── _embed.scss
│ │ └── ...
│ └── project
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── ...
└── utility
├── _bg.scss
├── _text.scss
├── _margin.scss
└── ...各レイヤーの役割
foundation
クラス群ではなく、HTMLの各要素に対してブラウザのスタイルの初期化と、基本的なスタイルの定義を行います。
object
いわゆる「サイト内パーツ」のクラス群です。 object は、3つの子レイヤーを持ちます。
module
サイト内で、最小単位となる機能を持ったレイヤーです。接頭辞を付与する場合は .m- が望ましいです。
Atomic DesignのAtomsに準じます。
component
サイト内で、module がひとつ以上含まれる可能性があるオブジェクトのクラス群です。接頭辞を付与する場合は .c- が望ましいです。
Atomic DesignのMoleculesに準じます。
project
そのプロジェクトのデザインや機能に大きく影響するレイヤーです。module と component が含まれる可能性があります。ブログの本文用CSSなど、採用するCMSに直結するCSSがある場合もここに含まれます。
このクラス群のみ、プロジェクト独自のクラスであることを示すため、レイヤー接頭辞 .p- が付与されています。
Atomic DesignのOrganismsに準じます。
layout
オブジェクトのグリッド配置など、レイアウトに関するレイヤーです。接頭辞を付与する場合は .l- が望ましいです。
プロジェクトごとの変更は極力避けます。
utility
色・文字サイズ・余白等を、上書き変更するためのヘルパークラスです。常に高い優先度を持っています。接頭辞を付与する場合は .u- や .hp- 等が望ましいです。