1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@uni928

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

1
Last updated at Posted at 2026-06-23
この記事で言いたい事

修正を繰り返す場合

  • !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.
カスタム指示に入れてテスト中の内容(171文字使うため、要検討) 
For HTML/CSS edits, avoid `!important` use `@layer` for priority. Add layers like `,make1, make2;` after existing layers if needed. Use `!important` only as a last resort.

!important を使わないだけでもバグは出る

!important を使わない方針は、CSSを保守しやすくするうえで有効です。

ただし、体感としては、単に「!important を使わないでください」と指示するだけでも、別の形のバグが出ることがあります。

たとえば、!important を使わずに何とか直そうとして、後から書いたCSSで無理に上書きしたり、同じようなセレクタを何度も追加したりして、結果的にどのスタイルが効いているのか分かりにくくなることがあります。

つまり、!important を禁止すれば自動的にCSSがきれいになるわけではありません。

むしろ、!important なしで既存CSSを安全に修正するには、CSSの読み込み順、詳細度、セレクタの強さ、上書き範囲をかなり意識する必要があります。

特に、既存CSSがすでに複雑になっている場合、!important を使わずに見た目だけをピンポイントで直すのは意外と難しいです。

これは推測ですが、ChatGPTは「より優先度の高い処理で上書きして問題を解決する」ような考え方に寄りやすい印象があります。

プログラミングでは、後から条件分岐を足す、より限定的な処理を追加する、最後に例外処理を置く、といった形で問題を解決できる場面が多くあります。

その感覚でCSSを修正すると、次のような方向に進みやすくなります。

`!important` なしでも起きる問題
  • 後から書いたCSSで既存スタイルを上書きしようとする
  • セレクタを少し強くして解決しようとする
  • 同じ目的のCSSが複数箇所に増える
  • 末尾の修正CSSだけがどんどん膨らむ
  • どの修正がどの画面に効いているのか分かりにくくなる
  • ある画面を直したつもりが、別の部品にも影響する

この状態になると、!important は使っていなくても、実質的には「後から強い指定を追加し続けるCSS」になります。

そのため、!important を使わないこと自体よりも、どのCSSを、どの優先度で、どの範囲に効かせるのかを明示することが重要です。

そこで @layer を使って、あらかじめCSSの優先順位を決めておくと、ChatGPTにも「どこに修正を追加すべきか」を指示しやすくなります。

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

このようにレイヤー順を決めておけば、通常の修正は overrides や latest に追加し、目的が分かれる修正だけ専用レイヤーに分ける、という運用ができます。

つまり、!important を避けるだけではなく、!important を使わずに済むための上書きルールを用意しておくことが大切です。

なぜ !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を作成・修正するときのプロンプトに入れておくとよいです。

カスタム指示に入れてテスト中の内容(171文字使うため、要検討) 
For HTML/CSS edits, avoid `!important` use `@layer` for priority. Add layers like `,make1, make2;` after existing layers if needed. 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を整理する
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?