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-
等が望ましいです。