標準の名称と定義¶

スコープの名称¶

※ ここでの「スコープ」は影響範囲の分類のことであり、CSSの @scope（セレクタの適用範囲を絞るアットルール）とは別です。

Global¶

Global（グローバル）は、サイト全域を表す名称です。
GlobalはCSS分類には登場せず、スコープの可視化のみに寄与します。

具体的には、同名のディレクトリ global/ を作成し、該当するCSSはすべてその中で管理することで、一目で影響範囲を把握できるようにします。

CSS分類の名称¶

Base¶

Base（ベース）は、プロジェクトの基底となるCSSです。

全域に影響する基礎や設定系のCSSであり、以下の Generic 〜 Elements までを包括する概念として定義します。

Generic¶

Generic（ジェネリック）は、異なるブラウザの初期スタイルを揃えるためのCSSです。
リセットCSS、ノーマライズ、サニタイズと呼ばれるようなCSSが該当します。

* {...}
html {...}
body {...}

Library¶

Library（ライブラリ）は、外部で作成された基底系や共通機能のCSSです。
例えばBootstrapや、BulmaなどのCSSフレームワークや、全域で利用する視差効果やアニメーションなどのCSSが該当します。

@import "bootstrap.css";

@use "swiper/swiper-bundle";

Resources¶

Resources（リソース） は、フォントやアニメーションなどの共通アットルールの定義です。
@font-face や @keyframes のように、@layer のどのブロックに書いても全レイヤーから名前で参照できるアットルールのうち、定義を一箇所に集約したいものを扱います。

対象アットルールの完全な一覧は 実質グローバルになるアットルールを参照してください。

なお @property は Tokens で管理しても構いません。

@font-face {...}
@keyframes fade {...}

Tokens¶

Tokens（トークン）は、デザイントークンとして用いるCSSカスタムプロパティです。
広範で利用する :root {...} による一般的なCSSカスタムプロパティが該当します。

@property の設定も含みますが、Resources で管理するかどうかは適宜決定してください。

:root {
  --color-primary: ...;
  --space-md: ...;
}

Themes¶

Themes（テーマ）は、ライト、ダークなどのテーマ切り替えに利用するスタイルです。
想定しているのは、Tokens層で定義したCSSカスタムプロパティの上書きです。

もし、class 属性への直接的なスタイリングを許可する場合は、@layer の宣言順を Pages の後に移動させるなどの工夫が必要です。

[data-theme="dark"] {
  --color-bg: ...;
}

Elements¶

Elements（エレメント）は、プレーンHTML用のスタイルです。
Generic とは役割が異なり、プロジェクト専用のスタイルを適用するためのものです。

正確には「HTML Elements」であり、管理の都合上「HTML」を省略しています。

h1 {...}
a {...}
p {...}

Layout¶

Layout（レイアウト）は、ヘッダー、フッターなどのページレイアウト要素です。
どのページでも必ず表示されるブランディングやナビゲーションなどの「Webサイトの枠組み部分」が該当します。

/* クラス名やプレフィックスは任意 */
.header {...}
.footer {...}

Components¶

Components（コンポーネント）は、ボタンやカードなどの共通部品です。
粒度の概念は無く、そのままの定義で共通利用する目的のものを指します。

/* クラス名やプレフィックスは任意 */
.button {...}
.card {...}

Pages¶

Pages（ページ）は、ページコンテンツ用のCSSです。
対象は、ページの主たる情報（主に、main タグの中に記述されるもの）です。

例えば、トップページではメインビジュアルや概要説明エリア、サービス紹介ページではサービスの特徴や比較表のコンテンツブロックが該当します。

/* クラス名は任意 */
.home-hero {...}

Pages はスコープ名でもあり分類（レイヤー）名でもあります。（説明を参照）

Parts¶

Parts（パーツ）は、複数ページ間で共通利用する部品です。
Pagesスコープで利用するために Components の名前違いとして標準化した命名です。
少量のページで何度か再利用するメールフォームや比較表など、必要に応じて利用します。

/* クラス名は任意 */
.contact-form {...}

Utilities¶

Utilities（ユーティリティ）は、単機能のCSSです。

ヘルパークラスやユーティリティクラスと呼ばれるもので、クラス名と効果が1：1になったようなCSSが該当します。 意図的な上書きのために、HTMLの class 属性にマルチクラスで記述するようなスタイルを扱います。

.mt-0 {...}
.text-center {...}

Print¶

Print（プリント）は、印刷用のCSSです。
@media print の利用を前提とするCSSで、ヘッダーやフッターの除去やフォントサイズの調整など、印刷に関わる上書き用のスタイルを扱います。

@page の設定も含みます。

@media print {...}
@page {...}

補助分類の名称¶

Abstracts¶

Abstracts（アブストラクト）は、プロジェクト全体で共通利用する関数、Mixin、Sassの変数です。
以下の Settings と Tools を包括する概念として定義します。

Settings¶

Settings（セッティング）は、内部機構に寄与するメタ言語の変数です。
現在Sass変数のみが該当します。

CSSのネイティブなCSSカスタムプロパティは含みません（これはTokens層で扱います）。

@use "sass:color";
$main-color: #4139a6;
$color-100: color.mix(#fff, $main-color, 40%);

$space-base: 16px;
$space-md: calc($space-base * 1.25);

Tools¶

Tools（ツール）は、スタイル出力用のMixinと、制作を効率化するための関数です。
ネイティブなCSSで利用するシーンは、CSSカスタム関数とミックスイン が実用レベルになった時です。

@mixin mq($breakpoint) {...}

@function rem($px) {...}