個人的に思うバグが出にくい順番「@layer運用」「縛り無し」「優先度禁止」

この記事で言いたい事

修正を繰り返す場合

• !importantを禁止するより縛り無しの方がバグは出にくい印象
• !important より @layer を優先する指示を行う事で、AI が上書きしやすい印象
• html 作成時に下記のプロンプトを加える事で、バグを減らしたい。

When creating or modifying HTML/CSS, do not use `!important` in principle; manage CSS priority with `@layer` whenever possible, using the base layer order `@layer reset, base, layout, components, utilities, overrides, latest;`, where `reset` is for browser normalization, `base` is for basic styles such as body, headings, and form elements, `layout` is for page structure, grid, flex, width, height, and spacing, `components` is for UI parts such as buttons, cards, and inputs, `utilities` is for small helper classes, `overrides` is for overriding existing styles, and `latest` is for styles that should have the highest priority in the current change. When adding or updating the layer declaration, always insert the following comment immediately above the `@layer` declaration: `/* When modifying this CSS in the future, do not use !important in principle; manage priority according to the @layer order below. Add normal overrides to overrides or latest, and add a clearly named layer only for fixes whose purpose is clearly separate. Do not leave unnecessary overrides that duplicate existing styles, and keep CSS for the same purpose from being scattered across multiple layers. If you want to safely separate the change scope, you may add numbered layers such as latest1, latest2, and latest3, but include a comment explaining their purpose. */`. For normal fixes, do not forcibly rewrite existing CSS; instead, add only the necessary overrides to `@layer overrides` or `@layer latest`. You may add extra layers only when it helps avoid priority bugs similar to `!important` conflicts, such as when similar selectors appear multiple times, adding to the existing `latest` layer may affect other screens or components, temporary/emergency/feature-specific fixes should be separated, layout/color/mobile/modal fixes have clearly different purposes, or the conflict is strong enough that you would otherwise want to use `!important`. When adding layers, use descriptive names such as `fixModal`, `fixMobile`, or `fixHeader` rather than numeric-only names whenever possible; Numbered layers such as `latest1`, `latest2`, and `latest3` may be added when numbering makes the edit history clearer, or when adding a new numbered layer is safer because modifying an existing layer may cause bugs; in either case, describe the purpose in comments whenever possible. Later layers in the layer declaration should have higher priority for normal CSS, for example `@layer reset, base, layout, components, utilities, overrides, fixMobile, latest;` makes `latest` the strongest normal layer. `!important` is prohibited in principle, but may be used minimally only when `@layer` alone cannot safely solve the issue, such as with external libraries, inline styles, or browser-extension-generated styles; in that case, always write a comment explaining the reason. After editing, check whether CSS for the same purpose is duplicated across multiple layers, remove or merge obsolete overrides, and avoid adding too many layers.

カスタム指示に入れてテスト中の内容(136文字使うため、要検討)

For HTML/CSS, prefer @layer (e.g. base, make1, make2, make3, ...). Move all unlayered CSS to base. Use !important only as a last resort.

!important 禁止だけでは、かえってバグりやすい

!important を避ける方針自体は、CSSの保守性を上げるうえで有効です。

ただし、単に「!important を使わない」と指示するだけだと、体感的にバグが増えやすいです。

!important を避けるなら、同時に上書きをうまく行うシステム的な仕組みを指示する必要があります。

既存CSSを書き換えるのも難しい

!important を使わず、後から上書きもしないなら、元からあるCSSを直接修正する方法もあります。

ただし、これも簡単ではありません。

既存CSSには、別の画面や部品にも効いている指定が含まれていることがあります。
そのため、一見不要に見える記述を変えると、意図しない場所の表示まで崩れることがあります。

つまり、既存CSSを書き換える場合も、その指定がどこまで影響しているのかを確認しながら修正する必要があります。

なぜ !important ではなく @layer を使うのか

!important は一時的には強いですが、後からさらに強い上書きが必要になったときに管理が難しくなります。

一方で @layer を使うと、CSSの役割ごとに優先順位を整理できます。

@layer reset, base, layout, components, utilities, overrides, latest;

このように先にレイヤー順を宣言しておくと、通常のCSSでは後に書いたレイヤーほど優先されます。

つまり、基本スタイルよりも、後から追加する overrides や latest を自然に強くできます。

`!important` が増える例

.button {
  color: red !important;
}

このような指定が増えると、次の修正でもまた !important を使うことになり、CSSの優先度がどんどん読みにくくなります。

ChatGPTに渡す指示文

以下を、ChatGPTでHTML/CSSを作成・修正するときのプロンプトに入れておくとよいです。

カスタム指示に入れてテスト中の内容(136文字使うため、要検討)

For HTML/CSS, prefer @layer (e.g. base, make1, make2, make3, ...). Move all unlayered CSS to base. Use !important only as a last resort.

プロンプト例(英語)

When creating or modifying HTML/CSS, do not use `!important` in principle; manage CSS priority with `@layer` whenever possible, using the base layer order `@layer reset, base, layout, components, utilities, overrides, latest;`, where `reset` is for browser normalization, `base` is for basic styles such as body, headings, and form elements, `layout` is for page structure, grid, flex, width, height, and spacing, `components` is for UI parts such as buttons, cards, and inputs, `utilities` is for small helper classes, `overrides` is for overriding existing styles, and `latest` is for styles that should have the highest priority in the current change. When adding or updating the layer declaration, always insert the following comment immediately above the `@layer` declaration: `/* When modifying this CSS in the future, do not use !important in principle; manage priority according to the @layer order below. Add normal overrides to overrides or latest, and add a clearly named layer only for fixes whose purpose is clearly separate. Do not leave unnecessary overrides that duplicate existing styles, and keep CSS for the same purpose from being scattered across multiple layers. If you want to safely separate the change scope, you may add numbered layers such as latest1, latest2, and latest3, but include a comment explaining their purpose. */`. For normal fixes, do not forcibly rewrite existing CSS; instead, add only the necessary overrides to `@layer overrides` or `@layer latest`. You may add extra layers only when it helps avoid priority bugs similar to `!important` conflicts, such as when similar selectors appear multiple times, adding to the existing `latest` layer may affect other screens or components, temporary/emergency/feature-specific fixes should be separated, layout/color/mobile/modal fixes have clearly different purposes, or the conflict is strong enough that you would otherwise want to use `!important`. When adding layers, use descriptive names such as `fixModal`, `fixMobile`, or `fixHeader` rather than numeric-only names whenever possible; Numbered layers such as `latest1`, `latest2`, and `latest3` may be added when numbering makes the edit history clearer, or when adding a new numbered layer is safer because modifying an existing layer may cause bugs; in either case, describe the purpose in comments whenever possible. Later layers in the layer declaration should have higher priority for normal CSS, for example `@layer reset, base, layout, components, utilities, overrides, fixMobile, latest;` makes `latest` the strongest normal layer. `!important` is prohibited in principle, but may be used minimally only when `@layer` alone cannot safely solve the issue, such as with external libraries, inline styles, or browser-extension-generated styles; in that case, always write a comment explaining the reason. After editing, check whether CSS for the same purpose is duplicated across multiple layers, remove or merge obsolete overrides, and avoid adding too many layers.

プロンプト例(日本語)

HTML/CSSを作成・修正する際は、原則として `!important` を使わないでください。

CSSの優先度調整には、できるだけ `@layer` を使ってください。

基本のレイヤー構成は次のようにしてください。

@layer reset, base, layout, components, utilities, overrides, latest;

各レイヤーの用途は次の通りです。

- `reset`: ブラウザ差異を減らすための初期化
- `base`: body、見出し、フォームなどの基本スタイル
- `layout`: 画面全体の配置、grid、flex、幅、高さ、余白
- `components`: ボタン、カード、入力欄などの部品スタイル
- `utilities`: 小さな補助クラス
- `overrides`: 既存スタイルの上書き
- `latest`: 今回の修正で最も優先したいスタイル

通常の修正では、既存CSSを無理に書き換えず、必要な上書きだけを `@layer overrides` または `@layer latest` に追加してください。

ただし、`!important` の衝突のような優先度バグを避けるために、次の条件に当てはまる場合だけ `@layer` を増やしても構いません。

1. 同じセレクタや近いセレクタが複数回出てきて、どれが優先されるべきか分かりにくい場合
2. 既存の `latest` に追記すると、別の画面・別の部品に副作用が出そうな場合
3. 一時的な修正、緊急修正、機能別修正を分離した方が安全な場合
4. レイアウト修正、色修正、スマホ対応、モーダル修正など、修正目的が明確に分かれている場合
5. `!important` を使いたくなるほど優先度の衝突が起きている場合

`@layer` を増やす場合は、数字だけの名前ではなく、できるだけ編集内容を端的に表す名前にしてください。

例：

@layer reset, base, layout, components, utilities, overrides, fixModal, fixMobile, latest;

または、編集履歴として分けた方が分かりやすい場合のみ、次のように番号付きにしても構いません。

@layer reset, base, layout, components, utilities, overrides, latest1, latest2, latest3;

ただし、番号付きレイヤーを使う場合でも、可能であればコメントで目的を明記してください。

@layer latest2 {
  /* スマホ表示時のカード余白修正 */
}

通常宣言では、後に定義したレイヤーほど優先されるようにしてください。

例：

@layer reset, base, layout, components, utilities, overrides, fixMobile, latest;

この場合、通常のCSSでは `latest` が最も優先されます。

この行の1行上に、下記のコメントを入れます。

/*
  今後このCSSを修正する際は、原則として !important を使わず、下記の @layer 順に従って優先度を管理する。
  通常の上書きは overrides または latest に追加し、目的が明確に分かれる修正のみ、用途が分かる名前のレイヤーを追加する。
  既存スタイルと重複する不要な上書きは残さず、同じ目的のCSSが複数レイヤーに分散しないよう整理する。
  安全に変更範囲を分離したい場合は、目的コメントを添えたうえで latest1, latest2, latest3 のような番号付きレイヤーを追加してもよい。
*/

`!important` は原則禁止です。
ただし、外部ライブラリ、インラインスタイル、ブラウザ拡張由来のスタイルなど、`@layer` だけでは安全に解決できない場合に限り、最小限だけ使用しても構いません。

その場合は、必ず理由をコメントで書いてください。

/* 外部ライブラリのインライン指定を避けられないため例外的に使用 */
.some-class {
  display: block !important;
}

編集後は、同じ目的のCSSが複数のレイヤーに重複していないか確認してください。
不要になった古い上書きは削除または統合し、`@layer` を増やしすぎないようにしてください。

実際のCSS例

たとえば、最初にレイヤー宣言を入れ、CSSを役割ごとに分けます。

この場合、.card は components と overrides の両方に出てきますが、レイヤー順では overrides の方が後なので、overrides 側の指定が優先されます。

レイヤー宣言の例

/*
  今後このCSSを修正する際は、原則として !important を使わず、下記の @layer 順に従って優先度を管理する。
  通常の上書きは overrides または latest に追加し、目的が明確に分かれる修正のみ、用途が分かる名前のレイヤーを追加する。
  既存スタイルと重複する不要な上書きは残さず、同じ目的のCSSが複数レイヤーに分散しないよう整理する。
  安全に変更範囲を分離したい場合は、目的コメントを添えたうえで latest1, latest2, latest3 のような番号付きレイヤーを追加してもよい。
*/
@layer reset, base, layout, components, utilities, overrides, latest;

役割ごとにCSSを分ける例

@layer reset {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #f5f5f5;
  }

  button,
  input,
  textarea {
    font: inherit;
  }
}

@layer layout {
  .page {
    min-height: 100vh;
    padding: 24px;
  }

  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}

@layer components {
  .card {
    padding: 24px;
    border-radius: 16px;
    background: #fff;
  }

  .button {
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }

  .mt-16 {
    margin-top: 16px;
  }
}

@layer overrides {
  .card {
    padding: 20px;
  }
}

@layer latest {
  .button {
    min-height: 44px;
  }
}

修正目的ごとにレイヤーを増やす例

通常は overrides または latest に追加すれば十分です。

ただし、スマホ対応やモーダル修正など、修正の目的が明確に分かれている場合は、専用レイヤーを追加すると分かりやすくなります。

専用レイヤーを追加する例

/*
  今後このCSSを修正する際は、原則として !important を使わず、下記の @layer 順に従って優先度を管理する。
  通常の上書きは overrides または latest に追加し、目的が明確に分かれる修正のみ、用途が分かる名前のレイヤーを追加する。
  既存スタイルと重複する不要な上書きは残さず、同じ目的のCSSが複数レイヤーに分散しないよう整理する。
  安全に変更範囲を分離したい場合は、目的コメントを添えたうえで latest1, latest2, latest3 のような番号付きレイヤーを追加してもよい。
*/
@layer reset, base, layout, components, utilities, overrides, fixMobile, fixModal, latest;

@layer fixMobile {
  @media (max-width: 640px) {
    .page {
      padding: 12px;
    }

    .card {
      padding: 16px;
      border-radius: 12px;
    }
  }
}

@layer fixModal {
  .modal {
    max-height: calc(100vh - 32px);
    overflow: auto;
  }
}

このようにしておくと、「スマホ対応の修正なのか」「モーダルの修正なのか」が分かりやすくなります。

番号付きレイヤーを使う場合

編集履歴として分けた方が分かりやすい場合は、番号付きレイヤーを使ってもよいです。

ただし、番号だけだと目的が分かりにくいため、コメントを付けるのがおすすめです。

個人的には、できるだけ fixMobile、fixModal、fixHeader のように、目的が分かる名前にした方が後から読みやすいと思います。

番号付きレイヤーの例

@layer reset, base, layout, components, utilities, overrides, latest1, latest2, latest3;

@layer latest2 {
  /* スマホ表示時のカード余白修正 */
  @media (max-width: 640px) {
    .card {
      padding: 16px;
    }
  }
}

!important を完全禁止にしない理由

!important は原則禁止でよいですが、完全禁止にすると逆に困るケースもあります。

その場合だけ、理由コメント付きで最小限にします。

大事なのは、!important を「なんとなく効かないから付ける」ものにしないことです。

使う場合は、理由をコメントに残します。

`!important` が必要になる場合

たとえば、以下のような場合です。

• 外部ライブラリのスタイルが強すぎる
• インラインスタイルが自動生成される
• ブラウザ拡張や埋め込みウィジェット由来のスタイルを避けられない
• 既存コードを大きく壊さずに一部だけ直す必要がある

/* 外部ライブラリのインライン指定を避けられないため例外的に使用 */
.some-class {
  display: block !important;
}

ChatGPTに修正を頼むときの追加指示例

既存のHTML/CSSをChatGPTに渡して修正してもらう場合は、次のように依頼すると安全です。

この指示を入れておくと、ChatGPTが場当たり的に !important を追加する可能性を減らせます。

追加指示の例

以下のHTML/CSSを修正してください。

CSS修正時は、原則として `!important` を使わないでください。
既存CSSを大きく書き換えず、必要な上書きだけを `@layer overrides` または `@layer latest` に追加してください。

ただし、修正目的が明確に分かれている場合は、`fixMobile` や `fixModal` のように用途が分かる名前のレイヤーを追加しても構いません。

編集後は、同じ目的のCSSが複数レイヤーに重複していないか確認し、不要な古い上書きがあれば削除または統合してください。

まとめ

ChatGPTでサイトを作るときは、CSSの優先度管理を最初に決めておくと、後からの修正がかなり楽になります。

特におすすめなのは、!important に頼らず、@layer でCSSの役割と優先度を整理することです。

ChatGPTにHTML/CSSを修正してもらう場合、単に「見た目を直して」と頼むよりも、CSSの運用ルールまで指定した方が、後から管理しやすいコードになりやすいです。

おすすめ方針の一覧

• !important は原則使わない
• CSSの優先度は @layer で管理する
• 基本構成は reset, base, layout, components, utilities, overrides, latest
• 通常の修正は overrides または latest に追加する
• バグをでにくくするために latest1 latest2 という数字管理を許可する
• 目的が分かれる修正だけ、用途名付きのレイヤーを追加する
• 例外的に !important を使う場合は、必ず理由コメントを書く
• 修正後は、重複したCSSを整理する