T
css architecture cascade-layers nesting houdini

현대 CSS 아키텍처: 캐스케이드 레이어, 중첩 및 @property

캐스케이드 레이어(@layer), 네이티브 중첩(Nesting), Houdini @property API로 CSS를 제어하세요. 확장 가능하고 유지 관리가 쉬운 스타일시트 구축 방법을 알아봅니다.

2026-04-18

현대 CSS 아키텍처: 캐스케이드 레이어, 중첩 및 @property

웹 프로젝트가 커질수록 CSS 관리는 큰 도전 과제가 됩니다. 우리는 오랫동안 글로벌 스코프, 명시도(Specificity), 코드 조직 문제를 해결하기 위해 Sass와 같은 외부 도구나 BEM과 같은 방법론에 의존해 왔습니다.

하지만 CSS는 진화했습니다. 이제 이러한 기능을 브라우저에 직접 제공하는 네이티브 기능들이 등장하여 더 나은 성능과 깊이 있는 통합을 제공합니다.

1. 캐스케이드 레이어 (@layer): 명시도 전쟁의 종결

**캐스케이드(Cascade)**는 CSS의 핵심이지만, 동시에 가장 큰 골칫거리이기도 합니다. 여러 스타일이 동일한 요소에 적용될 때 명시도가 높은 스타일이 승리합니다. 이로 인해 외부 라이브러리를 덮어쓰기 위해 불필요한 클래스를 추가하거나 !important를 남발하는 경우가 많았습니다.

캐스케이드 레이어를 사용하면 스타일 그룹 간의 우선순위를 명시적으로 정의할 수 있습니다.

레이어 정의 방법:

@layer reset, base, components, utilities;

@layer base {
  a { color: blue; }
}

@layer components {
  /* 선택자의 명시도가 낮더라도 'base' 레이어보다 우선합니다! */
  .nav a { color: red; }
}

파일 상단에 순서(reset, base, components, utilities)를 정의함으로써, 선택자가 아무리 복잡하더라도 "utilities"가 항상 "components"보다 우선하도록 보장할 수 있습니다.

2. 네이티브 CSS 중첩 (Nesting): Sass와 작별할 때?

10년 넘게 중첩(Nesting)은 Sass와 같은 전처리기를 사용하는 가장 큰 이유였습니다. 이제는 모든 주요 브라우저에서 네이티브로 지원됩니다.

네이티브 중첩 구문:

.card {
  background: white;
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &:hover {
    border-color: blue;
  }

  @media (min-width: 600px) {
    padding: 2rem;
  }
}

네이티브 중첩은 코드 중복을 줄이고 관련 스타일을 함께 묶어줍니다. 무엇보다 컴파일 단계가 필요 없어 개발 워크플로우가 더 빨라집니다.

3. @property: 타입 안정성을 갖춘 CSS 변수 (Houdini)

표준 CSS 변수(--variable)는 훌륭하지만 브라우저는 이를 단순한 문자열로 취급합니다. 그래서 그라데이션이나 특정 숫자 값을 애니메이션화하는 것이 쉽지 않았습니다.

@property 규칙(Houdini API의 일부)을 사용하면 커스텀 속성을 특정 타입, 초기값, 상속 여부와 함께 "등록"할 수 있습니다.

그라데이션 애니메이션 예시:

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-gradient {
  background: conic-gradient(from var(--angle), red, blue);
  transition: --angle 2s linear;
}

.rotating-gradient:hover {
  --angle: 360deg;
}

브라우저가 이제 --angle을 (단순 문자열이 아닌) 실제 "각도"로 이해하기 때문에, 값을 보간(interpolation)하여 이전에는 순수 CSS 변수만으로 불가능했던 부드러운 애니메이션을 만들 수 있습니다.

4. 테마 설정을 위한 CSS 커스텀 속성

@property가 타입 안정성을 제공한다면, 표준 커스텀 속성은 여전히 동적 테마 설정의 핵심입니다. 이를 color-mix() 함수나 oklch() 색 공간과 결합하면 단일 변수에서 전체 색상 팔레트를 생성할 수 있습니다.

:root {
  --brand-hue: 250; /* 파란색 */
  --primary: oklch(60% 0.15 var(--brand-hue));
  --primary-light: oklch(90% 0.05 var(--brand-hue));
}

5. @counter-style을 이용한 목록 커스터마이징

목록(List)의 표준적인 점, 원, 사각형 기호가 지겨우신가요? @counter-style을 사용하면 자신만의 번호 체계, 기호, 접미사를 정의할 수 있습니다.

@counter-style thumbs {
  system: cyclic;
  symbols: '👍' '👎';
  suffix: ' ';
}

ul {
  list-style: thumbs;
}

FAQ: 자주 묻는 질문

Q: 이제 Sass를 쓰지 말아야 하나요?

A: 네이티브 중첩과 커스텀 속성은 대부분의 사람들이 Sass를 사용하는 이유의 약 80%를 충족합니다. 믹스인(Mixins), 함수, 복잡한 루프와 같은 고급 기능이 필요하지 않다면 순수 CSS로 전환하는 것을 고려해 보세요.

Q: @layer는 구형 브라우저에서 지원되나요?

A: 캐스케이드 레이어는 2022년 초부터 모든 모던 브라우저에서 지원됩니다. 구형 브라우저에서는 무시되므로 점진적 향상(Progressive Enhancement) 전략을 고려해야 합니다.

Q: 일반적인 --var 대신 @property를 쓰는 이유는 무엇인가요?

A: 변수를 애니메이션화하거나, 기본값을 제공하거나, 변수를 특정 타입(<color> 또는 <length> 등)으로 제한해야 할 때 사용합니다.

웹의 미래를 구축하세요

현대 CSS는 글로벌하고 취약한 스타일에서 벗어나 더 구조화되고, 타입이 정의된 모듈형 아키텍처로 이동하고 있습니다. 이러한 새로운 도구들을 채택함으로써 더 디버깅하기 쉽고 성능이 뛰어난 사이트를 구축할 수 있습니다.

코드를 현대화하고 싶으신가요? 당사의 CSS 중첩 변환기(출시 예정)에서 Sass 코드가 네이티브 CSS로 어떻게 변환되는지 확인해 보세요.

블로그로 돌아가기