記述ルール

数値・font-size・font-weight の指定方法と、transition・z-index の使用ルール

数値

小数点の前の 0 は省略しません。Prettier を使うプロジェクトでは、フォーマット時に自動で補われます。

selector {
  opacity: 0.5; /* ✅ */
  opacity: .5; /* ❌ */
}

font-size

基本的に、実際に Chrome の文字サイズ変更機能（「極大」など）で検証し、拡大時のレイアウト崩れに対応できる場合のみ rem を使用し、それ以外は px を使用してください。

検証やレイアウト調整に十分なコストを割けない場合は、無理に rem を使わず px 指定とし、レイアウトの安定性を優先して構いません。

.title {
  font-size: clamp(20px, 16px + 1.5vw, 32px);
}

font-weight

原則として数値（400、700 など）で指定してください。

.title {
  font-weight: 700; /* ✅ */
  font-weight: bold; /* ❌ */
}

transition

不要なプロパティまでアニメーションしないよう all の使用は避け、プロパティを明示的に指定してください。

/* ❌ 悪い例 */
.button {
  transition: all 0.3s;
}

/* ✅ 良い例 */
.button {
  transition: background-color 0.3s;
}

z-index

z-index: 9999 のような場当たり的な値は、重なり順のトラブルや保守性の低下につながります。次の順で検討してください。

DOM の順序で解決する: 同じ重なりの文脈（スタッキングコンテキスト）の中では、HTML で後に書いた要素が上に重なります。まず z-index を使わずに済まないかを検討します。
コンポーネント内は 1 / -1 だけを使う: コンポーネントの中で重なり順を指定する場合は、z-index: 1 または z-index: -1 だけを使います。コンポーネントのルートに isolation: isolate を指定して重なりの文脈を閉じれば、外側の要素と干渉しません。
ページ全体のレイヤーはカスタムプロパティで管理する: ヘッダーやドロワーなど、ページ全体で重なり順を決める要素は、用途ごとのカスタムプロパティで一元管理します。

モーダルやポップオーバーは、dialog 要素や popover 属性で実装すると最前面（トップレイヤー）に表示されるため、z-index の指定が不要です（要素の使い分け）。

/* コンポーネント内 */
.card {
  position: relative;
  isolation: isolate;
}

.card__badge {
  position: absolute;
  z-index: 1;
}

/* ページ全体のレイヤー */
:root {
  --z-index-dropdown: 20;
  --z-index-header: 100;
}

.header {
  z-index: var(--z-index-header);
}

/* ヘッダーより 1 つ前に出したい場合は calc() で調整する */
.header-search {
  z-index: calc(var(--z-index-header) + 1);
}

/* ❌ 悪い例 */
.modal {
  z-index: 9999; /* 場当たり的な値 */
}

.dropdown {
  z-index: 1234; /* 用途が分からない値 */
}