원문: Medium에서 보기 Medium 글을 이 블로그로 이관한 버전입니다.
@layer: 스타일 우선순위의 새로운 패러다임
들어가며
웹 개발자라면 누구나 CSS의 캐스케이딩(Cascading) 특성으로 인한 스타일 충돌 문제를 경험해 보셨을 것입니다. 이러한 문제를 해결하기 위해 CSS에 새로운 기능인 ‘@layer’가 도입되었습니다. @layer를 사용하면 스타일 시트를 논리적인 계층으로 구성하고, 각 계층의 우선순위를 명시적으로 제어할 수 있습니다.
‘@layer’ 기능을 직접사용해보니 CSS 작업에 뛰어난 유지보수성과 스타일들을모듈로 관리 하여 팀원과의 협업에서도 좋은 개발자 경험을 느꼈습니다.
1. CSS @layer 소개
“ 스타일 우선순위를 계층으로 관리할 수 있는 기능”
CSS의 @layer 규칙은 스타일 시트 내에서 스타일 우선순위를 관리할 수 있게 해주는 새로운 기능입니다. 이 규칙을 사용하면 스타일 시트를 계층별로 나누어 각 계층의 우선순위를 제어할 수 있습니다.
2. layer 우선순위 규칙 사용법
우선순위 순서 정하기
- 계층 간의 우선순위는 선언된 순서에 따라 결정됩니다. 예를 들어,
@layer base가@layer theme보다 먼저 선언되었다면base계층이 더 낮은 우선순위를 가지며, 충돌 시에는 뒤에 선언된theme계층의 스타일이 우선합니다.
@layer base {
h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
}
@layer theme {
h1 {
color: #0056b3;
}
}
- 다중 계층 선언 여러 계층을 한 번에 선언할 수 있습니다. 단일로 선언하는 것과 헷갈리면 안됩니다. 이와 같이 미리 계층에 관한 우선순위를 선언하고 밑에서 계층에 스타일을 선언하는것이 한눈에 보기 더 적합니다. 한번 우선순위를 선언하면 밑에 스타일을 추가여도 우선순위는 보장됩니다.
reset (가장 낮은 우선순위)
base
theme
utilities (가장 높은 우선순위)
@layer reset, base, theme, utilities;
@layer utilities {
.item {
color: #0056b3;
}
}
@layer base {
.item {
color: #0056b3;
}
}
- !important가 적용된 스타일은 해당 계층 내에서 가장 높은 우선순위를 가집니다. 만약 겹치다고하면 우선순위가 역전됩니다.
- 계층 밖의 스타일은 항상 계층 내의 스타일보다 우선합니다.
출처: https://developer.mozilla.org/en-US
3. layer 만들기
@layer 규칙은 다음과 같이 선언할 수 있습니다:
익명 레이어 & 이름이 있는 레이어
@layer {
/* 스타일 규칙 */
}
@layer base {
/* 스타일 규칙 */
}
이름 없는 계층은 기본적으로 선언된 순서대로 우선순위가 결정됩니다. 이름 있는 계층을 사용하면 보다 명확하게 스타일 우선순위를 관리할 수 있습니다.
@layer와 @import의 결합
@import url('styles.css') layer(base);
이렇게 하면 styles.css 파일의 모든 스타일 규칙이 base 계층에 포함됩니다.
4. CSS 스타일 규칙 추가하기
스타일이 적용되는것을 보면 규칙들이 오버라이딩(Overriding)이 되어집니다.alert클래스 규칙이 다른 계층에도 있으면 가장 높은 우선순위를 가진 계층에 중복된 CSS 규칙들이 재정의 되어집니다.
@layer module, state;
@layer state {
.alert {
background-color: brown;
}
p {
border: medium solid limegreen;
}
}
@layer module {
.alert {
border: medium solid violet;
background-color: yellow;
color: white;
}
}
// example.html
// <p class="alert">Beware of the zombies</p>
결과 화면
결론
@layer는 비교적 새로운 기능이므로, 모든 브라우저에서 지원되지 않을 수 있습니다. 사용 전 반드시 대상 브라우저의 호환성을 확인해야 합니다. 필요한 경우 폴백(fallback) 스타일을 제공하거나, 프리프로세서나 포스트프로세서를 사용하여 호환성 문제를 해결할 수 있습니다.
그리고 과도한 계층 사용은 CSS 파싱 시간을 증가시킬 수 있습니다. 적절히 계층을 나누어 팀 내에서 계층 구조에 대한 합의와 문서화 준비되어진다면 유지보수하기 좋은 CSS 규칙을 유지보수 하기 용이할 것입니다.
읽어주셔서 감사합니다:)