ChatGPTにHTML/CSSの修正を頼んでいると、たまに !important が増えてCSSが読みにくくなることがあります。
一度だけなら問題なくても、修正を繰り返すと、
- どのCSSが効いているのか分かりにくい
- さらに強い上書きが必要になる
という状況になり
- 「見た目が崩れる」状態が頻発する
ということが起きやすくなります。
そこで最近、カスタム指示に次の文を入れています。
短さ優先版
For HTML/CSS,prefer @layer(e.g.base,make1,make2+),move unlayered CSS to base,use !important as last resort.
精度優先版(私が使っている方)
For HTML/CSS, prefer @layer (e.g. base, make1, make2, make3, ...). Move all unlayered CSS to base. Use !important only as a last resort.
やりたいこと
目的は、CSS全体をきれいに設計し直すことではありません。
やりたいのは、ChatGPTが修正するときに、すぐ !important を付けず、必要な上書きを @layer で後ろに追加してもらうことです。
@layer base, make1, make2, make3;
そして、今回の修正は make1 に入れます。
@layer make1 {
.button {
min-height: 44px;
}
}
次の修正では make2 に入れます。
@layer make2 {
.card {
padding: 16px;
}
}
さらに次の修正では make3 に入れます。
@layer make3 {
.modal {
max-height: calc(100vh - 32px);
overflow: auto;
}
}
何がうれしいか
make1, make2, make3 のように修正用レイヤーを分けると、後から見たときに「どの修正で追加されたCSSか」が分かりやすくなります。
また、!important を使わずに優先度を上げやすいので、場当たり的な上書きによるバグが明確に減る印象です。
個人的には、単に
!important を使わないで
と指示するよりも、
!important は避けて、@layer で優先度を管理して
と伝えた方が、CSS修正の事故が減る印象です。
「完全に上書きする」という指示が正常に実行されるのであれば、それに越したことはありません。どう見てもうまくいきそうなプロンプトなのですが、実際には体感的にバグの発生が多いため、この手法で妥協しています。
注意点
!important を完全禁止にはしていません。
外部ライブラリやインラインスタイルなど、どうしても必要な場面では最後の手段として使う、くらいの扱いが現実的です。
まとめ
ChatGPTにHTML/CSS修正を頼むとき、カスタム指示に次の一文を入れておくと、!important に頼った修正によるバグが明確に減る印象です。
For HTML/CSS, prefer @layer (e.g. base, make1, make2, make3, ...). Move all unlayered CSS to base. Use !important only as a last resort.
CSS設計を本格的に整理するというより、AIによる修正を安全に積み重ねるための小さなルールです。
短い指示ですが、体感的にはかなり効果があります。
可能ならば
@layer make3 {
/* TopNラベル付き候補は、ラベルと本文が重ならないよう縦方向の余白を強める */
...
}
のように、修正内容が分かるコメントも残したいところです。しかし、カスタム指示には1500文字といった文字数制限があるため、この点についても妥協せざるを得ないのが残念なところです。