CSS
プロパティのルール
transitionとz-indexの使用ルールと禁止事項
transition
不要なプロパティまでアニメーションしないようall の使用は避け、プロパティを明示的に指定してください。
このルールはStylelintの設定に基づいて自動的に整理されます。
/* ❌ 悪い例 */
.button {
transition: all 0.3s;
}
/* ✅ 良い例 */
.button {
transition: background-color 0.3s;
}
z-index
z-index の乱用や統一されたルールに従わない（例: z-index: 9999;など）値の指定は、重なり順のトラブルや保守性の低下につながります。基本的には HTML で後に記載した要素が上に重なる ため、z-index を使わずに制御してください。
どうしても重なり順を明示的に制御したい場合のみ、z-index: 1 または z-index: -1 のみを使用するようにしてください。
上記以外のz-index: 3 や z-index: 10;などの直接指定は禁止します。
さらに複雑なレイヤー構造が必要な場合のみ、用途ごとに変数で一元管理します。
変数定義例
z-index の用途ごとに、:root で変数をまとめて定義します。
:root {
--z-index-header: 100;
}
/* 使用例 */
.header {
z-index: var(--z-index-header);
}
グローバル変数で管理するほどではないが「特定の要素よりも前に出したい」場合は、calc() を使って局所的に調整することもできます。
/* 例：ヘッダーより1つ前に出したい場合 */
.element {
z-index: calc(var(--z-index-header) + 1);
}
禁止事項
- 直接数値（例:
z-index: 9999;など）の記述 - 変数を使わずに用途不明な値を設定
/* ❌ 悪い例 */
.modal {
z-index: 9999; /* 直接数値を指定している */
}
.dropdown {
z-index: 1234; /* 用途が不明な値を直接指定 */
}
/* ✅ 良い例 */
:root {
--z-index-modal: 30;
--z-index-dropdown: 20;
}
.modal {
z-index: var(--z-index-modal);
}
.dropdown {
z-index: var(--z-index-dropdown);
}