CSS コーディング規約

実装レイヤー選定（dzero-tech-selection）を経ていない場合は先にそちらを読むこと。詳細は CSS ガイドライン を参照。

実装規範

• リントエラー（Stylelint / Prettier）は例外なく必ず修正する。stylelint-disable コメントは原則使わず、ルールが現状にそぐわない場合は Config ファイル（.stylelintrc の selector-class-pattern 等）の変更を提案する
• ブラウザの予期せぬバグで期待どおり動かない場合は、ハックで抑え込まず別のアプローチ（別のプロパティ・実装方法）で解決する

ファイル構成

• コンポーネントのスタイルは __assets/_libs/component/c-コンポーネント名.css に置く（1 ファイル 1 コンポーネント・ファイル名とクラス名の一致は Stylelint が強制する）
• __assets/htdocs/css/style.css は @import のみでスタイルを定義しない。インポートは CSS レイヤー（reset / base / general / components / main）で分類する
• base/root.css のセレクタは :root のみ。グローバルなカスタムプロパティ（Figma のバリアブル由来を含む）はここに定義する
• general/ は素の要素へのスタイル（ファイル名はタグ名、セレクタはタイプセレクタのみ）。ページ全体に影響するため必要最小限にし、コンポーネントで定義できるものはコンポーネント内で定義する。「サイト全体で共通」という判断はほとんどの場合失敗するので推奨しない

セレクタ

• タイプセレクタは利用可能だが、コンポーネントはコンポーネントを内包できるため注意する。エレメントにクラスを付けて対象を限定するか、> 結合子で影響範囲を限定する

セレクタの形式（BEM 記法のフラットセレクタ、ID セレクタの禁止、記述順など）は Stylelint が強制するため、警告に従って修正すればよい。

値

• 値の意図が伝わる書き方をする。font-size はコンポーネントのルートは rem、エレメントは em を推奨（値のフォーマット自体は Stylelint が強制する）
• 余白・サイズなど、プロジェクトのカスタムプロパティ（デザイントークン）に対応する値を直接書かない。var() で参照する（色・z-index の直書きは Stylelint が警告する）
• line-height は絶対値（px）で書かず、font-size との比率で書く

カスタムプロパティ

• カスタムプロパティは積極的に採用する
• レスポンシブのブレークポイントは規定のカスタムクエリー（--xs 〜 --xl、--*-lte / --*-gt、--hr）を利用する

命名

クラス名・識別子の命名は dzero-html の「命名」に従う。