CSS Layers: 스타일링 작업의 게임 체인저

이번에 소개해드리는 글은 CSS의 Cascade Layers에 대한 글입니다. 이 글은 짧고 핵심을 짚습니다. 기존에 CSS 스타일 작업이 @layer를 통해 어떻게 바뀔 수 있는지, 어떤 흐름으로 작업하면 좋을지, 디버깅은 어떻게 하는지 간단하게 소개합니다.

목차를 요약하면 아래와 같습니다.

1. 왜 css layers를 알아야 하는지?

2. css layer를 정의하고 사용하기

   1. layer 생성

   2. layer 순서

   3. 중첩 layer

   4. CSS import와 함께 layer 사용

3. css layer 디버깅

4. 브라우저 지원 범위

대규모 프로젝트를 운영하다보면 스타일 우선순위 또는 덮어쓰기 등의 문제로 정말 많은 시간을 씁니다. 심지어 기존 요소에 적용한 스타일에 영향을 주지 않고 적절한 스타일을 적용하기 위해 요소를 뜯어 고치는 일도 많습니다. 이러한 문제는 아무리 CSS를 체계적으로 관리하고 사용하더라도 부딪히는 것 같습니다.

css layers를 사용하면 이런 문제가 발생할 가능성을 조금은 낮출 수 있을지 모르겠습니다. css 파일을 불러오는 순서나 !import가 아닌 layer를 적용하는 순서에 따라 스타일 '집합'을 적용하는 건 더 좋은 방법입니다.

이 짧은 글을 통해 css layer에 대해 알고, 당장 적용하지 못하더라도 더 나은 방법으로 스타일을 적용하는 방법에 대해 고민하는 계기가 되면 좋겠습니다.