개인적으로 생각하는 버그가 잘 생기지 않는 순서: 「@layer 운용」, 「제약 없음」, 「!important 금지」

ChatGPT로 HTML/CSS 사이트를 만들다 보면, 수정을 거듭할 때마다 CSS가 늘어나 결국 관리가 어려워지는 경우가 있습니다.

특히 ChatGPT에게 "이 부분을 고쳐줘"라고 몇 번이고 요청하다 보면, 기존 CSS를 정리하지 않고 끝부분에 덮어쓰기가 계속 추가될 수 있습니다.

그 대책으로서, HTML/CSS를 작성·수정해 달라고 할 때 처음부터 @layer를 사용한 CSS 관리 규칙을 지시해 두면 편리합니다.

CSS 수정을 거듭할 때 발생하기 쉬운 문제

예를 들어, 다음과 같은 상태가 되기 쉽습니다.

• 동일한 셀렉터(Selector)가 계속해서 등장함
• 어떤 CSS가 적용되고 있는지 알 수 없음
• 일단 !important를 붙여서 해결해 버림
• 나중에 다른 화면이나 부품에 부작용이 발생함
• 스마트폰 대응이나 모달(Modal) 수정만을 분리할 수 없음

!important를 사용하지 않는 방침은 CSS를 유지보수하기 쉽게 만드는 데 유효합니다.

하지만 단순히 "!important를 금지한다"는 것만으로는 불충분합니다.

왜냐하면, !important를 사용하지 않더라도 CSS의 우선순위나 로드 순서가 정리되어 있지 않으면 다른 형태로 버그가 발생하기 때문입니다.

즉, 문제는 !important 그 자체만이 아닙니다.

진정한 문제는, CSS의 우선순위를 어디서, 어떤 목적으로, 어느 범위에 적용할 것인지가 관리되지 않고 있다는 것입니다.

따라서 !important를 사용하지 않는 것 자체보다, CSS 덮어쓰기 규칙을 명시하여 나중에 봐도 수정 의도를 알 수 있는 상태로 만드는 것이 중요합니다.

!important를 사용하지 않아도 발생하는 문제

예를 들어, 다음과 같은 문제가 발생합니다.

• 나중에 작성한 CSS가 의도치 않게 기존 스타일을 덮어씀
• 동일한 셀렉터가 여러 곳에 있어 어떤 것이 적용되는지 알 수 없게 됨
• 수정용 CSS를 끝에 계속 추가하여 오래된 덮어쓰기가 계속 남음
• 스마트폰용 수정이 PC 화면에도 영향을 미침
• 모달만 고치려던 것이 다른 카드나 버튼에도 영향을 미침
• latest에 무엇이든 너무 많이 넣어서 결국 어떤 수정이 무엇을 위한 것인지 알 수 없게 됨

!important를 사용하지 않을 때도 필요한 규칙

!important를 사용하지 않을 때도 다음과 같은 규칙이 필요합니다.

• 레이어(Layer)의 역할을 결정함
• 어느 레이어에 추가할지 결정함
• 수정 목적이 다른 CSS를 같은 장소에 섞지 않음
• 불필요해진 오래된 덮어쓰기를 남기지 않음
• 동일한 목적의 CSS를 여러 레이어에 분산시키지 않음
• 변경 범위가 넓어질 것 같은 수정은 전용 레이어로 나눔

latest에 무엇이든 너무 많이 넣으면 읽기 어려워지는 예

예를 들어, 모든 수정을 latest에 계속 넣으면 처음에는 편하지만, 나중에는 다음과 같은 상태가 됩니다.

@layer latest {
.card {
padding: 20px;
...

이와 같이 동일한 .card에 대한 수정이 계속 등장하면, !important를 사용하고 있지 않더라도 충분히 읽기 어려워집니다.

수정 목적별로 나누는 예

수정 목적이 명확히 다를 경우에는 다음과 같이 나누는 것이 안전합니다.

@layer reset, base, layout, components, utilities, overrides, fixCardSpacing, fixMobile, latest;
@layer fixCardSpacing {
.card {
...

이렇게 나누면 어떤 수정이 무엇을 위해 추가된 것인지 알기 쉬워집니다.

다만, 레이어를 너무 많이 늘리면 그것대로 관리가 어려워집니다.

따라서 @layer는 "늘리면 좋은" 것이 아니라, 수정 목적을 분리하는 것이 안전한 경우에만 늘린다는 정도가 적당합니다.

!important는 일시적으로는 강력하지만, 나중에 더 강력한 덮어쓰기가 필요해졌을 때 관리가 어려워집니다.

반면 @layer를 사용하면 CSS의 역할에 따라 우선순위를 정리할 수 있습니다.

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

이와 같이 미리 레이어 순서를 선언해 두면, 일반적인 CSS에서는 나중에 작성한 레이어일수록 우선순위가 높아집니다.

즉, 기본 스타일보다 나중에 추가하는 overrides나 latest를 자연스럽게 더 강력하게 만들 수 있습니다.

!important가 늘어나는 예

.button {
color: red !important;
}

이러한 지정이 늘어나면, 다음 수정 시에도 또다시 !important를 사용하게 되어 CSS의 우선순위(priority)가 점점 읽기 어려워집니다.

다음 내용을 ChatGPT로 HTML/CSS를 작성하거나 수정할 때 프롬프트(prompt)에 넣어두면 좋습니다.

프롬프트 예시 (영어)

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가 다른 화면이나 컴포넌트에 영향을 줄 수 있으므로, 임시/긴급/기능 특정 수정 사항은 분리되어야 합니다. 레이아웃/색상/모바일/모달 수정은 목적이 명확히 다르거나, 그렇지 않으면 !important를 사용하고 싶을 정도로 충돌이 강력한 경우에 해당합니다.

layer를 추가할 때는 가능한 한 숫자만 사용하는 이름 대신 fixModal, fixMobile, 또는 fixHeader와 같이 서술적인 이름을 사용하세요. latest1, latest2, latest3와 같은 번호가 매겨진 layer는 번호를 매기는 것이 수정 이력을 더 명확하게 만들거나, 기존 layer를 수정하는 것이 버그를 유발할 수 있어 새로운 번호 layer를 추가하는 것이 더 안전할 때 추가할 수 있습니다. 어떤 경우든 가능한 한 주석으로 목적을 설명하세요. layer 선언에서 나중에 나오는 layer일수록 일반적인 CSS에서 더 높은 우선순위를 가집니다. 예를 들어, @layer reset, base, layout, components, utilities, overrides, fixMobile, latest;는 latest를 가장 강력한 일반 layer로 만듭니다. !important는 원칙적으로 금지되지만, 외부 라이브러리, 인라인 스타일(inline styles), 또는 브라우저 확장 프로그램이 생성한 스타일과 같이 @layer만으로는 문제를 안전하게 해결할 수 없는 경우에만 최소한으로 사용할 수 있습니다. 이 경우 항상 이유를 설명하는 주석을 작성하세요. 편집 후에는 동일한 목적의 CSS가 여러 layer에 중복되어 있는지 확인하고, 쓸모없어진 overrides를 제거하거나 병합하며, 너무 많은 layer를 추가하는 것을 피하세요.

프롬프트 예시 (일본어)

HTML/CSS를 작성하거나 수정할 때는 원칙적으로 `!important`를 사용하지 마세요.
CSS 우선순위 조정에는 가급적 `@layer`를 사용하세요.
기본적인 레이어 구성은 다음과 같이 하세요.
...

예를 들어, 처음에 layer 선언을 넣고 CSS를 역할별로 나눕니다.

이 경우, .card는 components와 overrides 양쪽 모두에 나타나지만, layer 순서에서는 overrides가 더 뒤에 있으므로 overrides 측의 지정이 우선됩니다.

layer 선언 예시

/*
향후 이 CSS를 수정할 때는 원칙적으로 !important를 사용하지 않고, 아래의 @layer 순서에 따라 우선순위를 관리한다.
일반적인 덮어쓰기는 overrides 또는 latest에 추가하며, 목적이 명확히 구분되는 수정에 대해서만 용도를 알 수 있는 이름의 layer를 추가한다.
...

역할별로 CSS를 나누는 예시

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

보통은 overrides 또는 latest에 추가하는 것만으로 충분합니다.

단, 스마트폰 대응이나 모달 수정 등 수정 목적이 명확히 구분되어 있는 경우에는 전용 layer를 추가하면 이해하기 쉬워집니다.

전용 layer를 추가하는 예시

/*
향후 이 CSS를 수정할 때는 원칙적으로 !important를 사용하지 않고, 아래의 @layer 순서에 따라 우선순위(Priority)를 관리한다.
통상적인 덮어쓰기는 overrides 또는 latest에 추가하며, 목적이 명확히 구분되는 수정에 대해서만 용도를 알 수 있는 이름의 레이어를 추가한다.
...

@layer fixMobile {
@media (max-width: 640px) {
.page {
...

이렇게 해두면 "스마트폰 대응 수정인지", "모달 수정인지"를 알기 쉬워집니다.

편집 이력으로서 나누는 것이 더 이해하기 쉬운 경우에는 번호가 붙은 레이어를 사용해도 좋습니다.

단, 번호만 있으면 목적을 알기 어렵기 때문에 주석(Comment)을 다는 것을 추천합니다.

개인적으로는 가능한 한 fixMobile,

fixModal,

fixHeader와 같이 목적을 알 수 있는 이름으로 만드는 것이 나중에 읽기 편하다고 생각합니다.

번호가 붙은 레이어의 예

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

@layer latest2 {
/* 스마트폰 표시 시의 카드 여백 수정 */
@media (max-width: 640px) {
...

!important는 원칙적으로 금지하면 되지만, 완전히 금지하면 오히려 곤란한 케이스도 있습니다.

그 경우에만 이유를 적은 주석과 함께 최소한으로 사용합니다.

중요한 것은 !important를 "왠지 적용되지 않으니까 붙이는" 것으로 만들지 않는 것입니다.

사용할 경우에는 이유를 주석으로 남깁니다.

!important가 필요해지는 경우

예를 들어, 다음과 같은 경우입니다.

• 외부 라이브러리의 스타일이 너무 강함
• 인라인 스타일(Inline style)이 자동 생성됨
• 브라우저 확장 프로그램이나 임베디드 위젯 유래의 스타일을 피할 수 없음
• 기존 코드를 크게 망가뜨리지 않고 일부만 수정해야 함

/* 외부 라이브러리의 인라인 지정(Inline specification)을 피할 수 없으므로 예외적으로 사용 */
.some-class {
display: block !important;
...

기존 HTML/CSS를 ChatGPT에게 전달하여 수정을 요청할 때는 다음과 같이 의뢰하면 안전합니다.

이 지시사항을 넣어두면 ChatGPT가 임기응변식으로 !important를 추가할 가능성을 줄일 수 있습니다.

추가 지시의 예

다음 HTML/CSS를 수정해 주세요.
CSS 수정 시에는 원칙적으로 `!important`를 사용하지 마세요.
기존 CSS를 크게 다시 쓰지 말고, 필요한 덮어쓰기만 `@layer overrides` 또는 `@layer latest`에 추가해 주세요.
...

ChatGPT로 사이트를 만들 때는 CSS의 우선순위 관리를 처음에 결정해 두면 나중에 수정하기가 훨씬 수월해집니다.

특히 추천하는 방법은 !important에 의존하지 않고, @layer로 CSS의 역할과 우선순위를 정리하는 것입니다.

ChatGPT에게 HTML/CSS 수정을 요청할 때, 단순히 "외관을 고쳐줘"라고 부탁하기보다 CSS 운영 규칙까지 지정하는 것이 나중에 관리하기 쉬운 코드가 될 가능성이 높습니다.

추천 방침 목록

• !important는 원칙적으로 사용하지 않는다
• CSS의 우선순위는 @layer로 관리한다
• 기본 구성은 reset, base, layout, components, utilities, overrides, latest로 한다
• 통상적인 수정은 overrides 또는 latest에 추가한다
• 목적이 나뉘는 수정에 대해서만 용도 이름이 붙은 레이어를 추가한다
• 예외적으로 !important를 사용하는 경우에는 반드시 이유를 주석으로 작성한다
• 수정 후에는 중복된 CSS를 정리한다