【ChatGPT】CSS 수정 시 !important 주변의 버그를 줄이고 싶다

ChatGPT에게 HTML/CSS 수정을 요청하다 보면, 가끔 !important가 늘어나 CSS를 읽기 어려워지는 경우가 있습니다.

한 번뿐이라면 문제가 없어도, 수정을 반복하면,

• 어떤 CSS가 적용되고 있는지 알기 어려움
• 더욱 강력한 덮어쓰기가 필요해짐

이라는 상황이 되어

• 「외관이 무너지는」 상태가 빈번하게 발생

하는 일이 일어나기 쉽습니다.

그래서 최근, 커스텀 지시(Custom Instructions)에 다음과 같은 짧은 문장을 넣고 있습니다.

For HTML/CSS, avoid !important; prefer @layer. Add layers (e.g. firstCreateAllCSS, make1, make2) if needed. Use !important only as a last resort.

목적은 CSS 전체를 깔끔하게 다시 설계하는 것이 아닙니다.

하고 싶은 것은 ChatGPT가 수정할 때, 즉시 !important를 붙이지 않고, 필요한 덮어쓰기를 @layer로 뒤에 추가하도록 하는 것입니다.

예를 들어 기존 CSS의 끝에 다음과 같은 레이어(layer)를 추가합니다.

@layer 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);
...

make1, make2, make3와 같이 수정용 레이어를 나누면, 나중에 봤을 때 「어떤 수정으로 추가된 CSS인가」를 알기 쉬워집니다.

또한, !important를 사용하지 않고도 우선순위(priority)를 높이기 쉬우므로, 임기응변식 덮어쓰기로 인한 버그가 명확히 줄어든다는 인상을 받습니다.

개인적으로는 단순히

!important를 사용하지 마

라고 지시하는 것보다,

!important는 피하고, @layer로 우선순위를 관리해줘

라고 전달하는 편이 CSS 수정 사고가 줄어드는 인상입니다.

「완전히 덮어쓴다」라는 지시가 정상적으로 실행된다면 그보다 더 좋은 것은 없습니다. 누가 봐도 잘 작동할 것 같은 프롬프트입니다만, 실제로는 체감상 버그 발생이 많기 때문에 이 수법으로 타협하고 있습니다.

!important를 완전히 금지하고 있지는 않습니다.

외부 라이브러리나 인라인 스타일(inline style) 등, 어쩔 수 없이 필요한 상황에서는 마지막 수단으로 사용하는 정도의 취급이 현실적입니다.

ChatGPT에게 HTML/CSS 수정을 부탁할 때, 커스텀 지시에 다음 한 문장을 넣어두면 !important에 의존한 수정으로 인한 버그가 명확히 줄어드는 인상입니다.

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.

CSS 설계를 본격적으로 정리한다기보다, AI에 의한 수정을 안전하게 쌓아 올리기 위한 작은 규칙입니다.

짧은 지시이지만, 체감상으로는 꽤 효과가 있습니다.

가능하다면

@layer make3 {
/* TopN 라벨이 붙은 후보는, 라벨과 본문이 겹치지 않도록 세로 방향 여백을 강화 */ // 지시한 프롬프트의 개요라도 가능 (첨부 파일 제외)
...
...

와 같이, 수정 내용을 알 수 있는 주석(comment)도 남기고 싶은 부분입니다. 하지만 커스텀 지시에는 1500자 정도의 글자 수 제한이 있기 때문에, 이 점에 대해서도 타협할 수밖에 없는 것이 아쉬운 점입니다.