CSS 캐스케이드 레이어 빌더

사용 방법

1. 1

   스택 만들기

   예제에서 시작하거나 이름을 직접 고칩니다. 레이어는 12개까지 추가할 수 있습니다. 일반 선언의 평면 이름은 스택의 위쪽이 가장 강하고 아래쪽이 가장 약합니다. 점으로 이은 하위 레이어는 부모 그룹 안에 머무르므로 결과 패널에서 실제 순서를 확인하세요. 핸들을 끌거나 화살표 버튼으로 순서를 바꿉니다.

2. 2

   이름 규칙 지키기

   이름은 CSS 식별자여야 합니다. 영문자·숫자·하이픈·밑줄을 쓰고 숫자로 시작할 수 없습니다. 하위 레이어는 framework.base처럼 부모 이름 뒤에 점으로 잇습니다. 이름은 40자 이하이고 서로 달라야 합니다.

3. 3

   어느 규칙이 이기는지 보기

   모든 레이어가 같은 버튼의 배경색을 지정합니다. 레이어 밖 규칙을 켜거나 레이어에 !important를 붙이면 결과 패널에 이기는 규칙, 전체 우선순위, 그 이유가 나타납니다.

4. 4

   출력 복사하기

   순서 선언문과 블록, 순서 선언문만, @import 줄 중 형식을 골라 복사한 뒤 메인 스타일시트 맨 위에 붙여 넣습니다.

5. 5

   규칙을 레이어로 옮기기

   각 스타일 묶음을 해당 @layer 이름 { ... } 블록 안에 넣거나 외부 CSS를 직접 레이어로 가져옵니다.

작동 원리

@layer reset, base, components, utilities;

@layer reset {
  /* reset styles */
}

실제 예시

reset, base, components, utilities

@layer reset, base, components, utilities;

@layer reset {
  /* reset styles */
}

@layer base {
  /* base styles */
}

@layer components {
  /* components styles */
}

@layer utilities {
  /* utilities styles */
}

Reset, framework.base

@layer Reset, framework.base;

@layer Reset {
  /* Reset styles */
}

@layer framework.base {
  /* framework.base styles */
}

base, base

두 번째 레이어 이름 오류: 이미 같은 이름의 레이어가 있습니다.

1st, base

첫 번째 레이어 이름 오류: 식별자로 입력해 주세요. 영문자·숫자·-·_를 쓰며 숫자로 시작할 수 없습니다. 하위 레이어는 framework.base처럼 점으로 잇습니다.

reset, 순서만 형식

@layer reset;

reset, vendor.ui, @import 형식

@layer reset, vendor.ui;
@import url("reset.css") layer(reset);
@import url("vendor-ui.css") layer(vendor.ui);

자주 하는 실수

• 레이어 밖 CSS는 모든 레이어를 이깁니다

  레이어로 감싸지 않은 옛 스타일은 일반 선언에서 새 레이어를 모두 이깁니다. 레이어 규칙이 무시되는 것처럼 보이는 가장 흔한 이유입니다.

• 순서는 처음 언급된 시점으로 정해집니다

  순서 선언문이 로드되기 전에 컴포넌트 파일이 components를 먼저 언급하면 그 레이어가 의도보다 앞 순위가 됩니다. 순서 선언문을 다른 CSS보다 먼저 두세요.

• !important는 순위를 뒤집습니다

  important 선언에서는 레이어 순서가 반대로 적용되어, !important가 붙은 reset이 유틸리티를 막을 수 있습니다. 반전을 노리는 경우가 아니면 레이어 안에서 !important를 피하세요.

• 레이어는 선택자를 격리하지 않습니다

  레이어는 충돌 해결에만 영향을 줍니다. 선택자는 여전히 어디에서나 일치하므로 컴포넌트로 스타일 범위를 제한해 주지는 않습니다. 그 용도에는 @scope 도구를 보세요.

• 외부 CSS는 import 레이어가 필요합니다

  일반 <link>로 불러온 라이브러리 스타일시트는 레이어 밖이라 내 레이어를 이깁니다. 내 규칙보다 앞에서 @import url(lib.css) layer(vendor);로 레이어에 넣으세요.

자주 묻는 질문