CSS 사양: 캐스케이드 레이어 - 빠른 소개 및 사용 예

반응형

해결해야 할 문제

계산 후 예측할 수 없는 CSS 값입니다.

CSS 충돌로 인한 퇴행과의 끝없는 싸움:

• CSS 특이성을 유지하기 위한 비대해진 CSS 선택기 복잡성
• CSS 선택기 충돌로 인한 취약한 CSS 규칙 순서 지정
• !어디서나 오는 중요한!

 

CSS 캐스케이드 레이어의 목표

캐스케이드 레이어를 사용하면 스타일시트에 걸쳐 규칙 집합의 특이성과 순서를 제어할 수 있어 유지관리 가능하고 예측 가능한 CSS 값을 생성할 수 있다.

계층이 존재할 때, 계층들은 각각이 포함하는 CSS 규칙의 특수성에 관계 없이 먼저 정렬된다.

예:

@layer base, specific;
.p {
    color: blue;
}
@layer base {
    color: red;
}
@layer specific {
    color: green;
}
/* precedence(high > low): .p > base specific > base */
/* Any unlayered rule > layered rule unless !important applied */
/* See the end of article for a more complete precedence ordering */

 

스타일 파일의 사용법

사용량 요약

• 모든 CSS 규칙 캡슐화
• 때때로 올바르게 적용하기 어려운 경우 의존하지 않고 더 쉬운 우선 순위: CSS 특이성 및 규칙 순서 지정
• 기존 규칙에도 적용됨
• 기존 도면층 확대/재지정
• 작성자는 계층에 이름을 지정하여 재지정할 수 있는지 여부를 결정할 수 있습니다.

작성자-출신 우선 순위

앞의 것은 이후의 것에 의해 재정의된다.

 

• 도면층 재설정
• 기준층
• 패턴 도면층
• 구성 요소 도면층
• 도면층되지 않은 스타일(모든 도면층 뒤에 명명되지 않은 도면층에 정의된 것처럼)
• 요소 부착 스타일 속성
• 애니메이션
• 중요(!중요)
• 중요 재설정 도면층
• 중요 기본 계층
• 중요 패턴 도면층
• 중요 구성 요소 계층
• 중요한 미적층 스타일
• 중요한 요소 부착 스타일 속성