Dzero Css

---
name: dzero-css
description: D-ZERO の CSS コーディング規約。CSS を書く・編集する・レビューするときに使う。コンポーネントのスタイル、レイアウト、レスポンシブ、カスタムプロパティ、セレクタ設計に適用する。
paths: ['**/*.css']
license: CC-BY-NC-SA-4.0
---

# CSS コーディング規約

> 実装レイヤー選定（`dzero-tech-selection`）を経ていない場合は先にそちらを読むこと。詳細は [CSS ガイドライン](https://guidelines.d-zero.co.jp/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 が警告する）
  <!-- 暫定ルール: stylelint（declaration-strict-value 系）による色以外のトークン強制を linters に提案中。導入されたらこの項目は削除する -->
- `line-height` は絶対値（px）で書かず、`font-size` との比率で書く
  <!-- 暫定ルール: stylelint（declaration-property-unit-disallowed-list）による line-height の px 禁止を linters に提案中。導入されたらこの項目は削除する -->

### カスタムプロパティ

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

### 命名

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