コーディングルール

基本的なマークアップ

HTMLファイルの基本構造は以下の通りです。レイヤー構造がcomponent以上のオブジェクトは、必ずdiv要素でグルーピングされます。
div要素の閉じタグの後ろには、コメントでクラス名を付与するのが望ましいです。複数ある場合はすべて書くことは酒、識別しやすい代表的なものを書きます。

<div class="example">
    <div class="example-inner">
        ...
    </div><!-- /.example-inner -->
</div><!-- /.example -->

クラス命名規則

echo.cssのCSSクラスの命名規則は、SMACSSを参考にしています。

Scalable and Modular Architecture for CSS

デフォルトの命名規則は以下の通りです。ハイフン1個で連結します。

prefix-block-element-modifier

ヘッダ・フッタが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

そのプロジェクトのデザインや機能に大きく影響するパーツのクラス群です。modulecomponent が含まれる可能性があります。
ブログの本文用CSSなど、採用するCMSに直結するCSSがある場合もここに含まれます。クラスには初期状態で .p- の接頭辞が付けられます。
Atomic DesignのOrganismsに準じます。

utility

文字サイズ、余白、外観などをその要素のみで調整するための補助クラスです。クラスには初期状態で .u- の接頭辞が付けられます。