EVERY LAYOUT の3つのレイヤー

CSSスタイル設定の3つのレイヤー

1. グローバルスタイル
2. レイアウトプリミティブ
3. ユーティリティクラス

1. グローバルスタイル

:root {
    /* モジュラースケールの考え方 */
    --ratio: 1.5;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s0: 1rem;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));

    /* カラム幅の公理の考え方 */
    --measure: 30em;
}

* {
    max-width: var(--measure);
    line-height: var(--ratio);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ;
    color: ;
}

*::before, *::after {
  box-sizing: border-box;
}

html, body, div, section, header, nav, main, footer {
    max-width: none;
}

グローバルスタイルは、CSSのグローバルに適用出来る性質を生かすものである。
グローバルに、:root, * といった要素や、各HTML要素を定義する。
また、モジュラースケールの考え方やカラム幅の公理の考え方を適用する。

2. レイアウトプリミティブ

レイアウト用のHTMLのカスタム要素を作る。
EVERY LAYOUT の本で提供しているモジュールは、このカスタム要素を指す。

3. ユーティリティクラス

HTML要素やレイアウトプリミティブのカスタム要素に、適用するクラス。
大きくなりやすく、クラスの付与は実装者がミスを起こしやすいので、なるべくグローバルスタイルとレイアウトプリミティブで解決するようにする。
ユーティリティクラスのcssはグローバルスタイルを定義している箇所に定義すると良さそう。