@layer

CSS의 cascade 계층을 선언하고 관리하는 at-rule
우선순위를 제어할 수 있으며 모듈화를 통해 일정 속성을 사용할 때만 스타일을 적용할 수 있다

우선순위 순서
레이어 선언 안 된 속성 > 이름 없는 레이어 > 이름 있는 레이어

이름 있는 레이어 안에서의 우선 순위는 계층 선언 순서대로 우선순위가 결정된다
state > module

/* 계층 선언 */
@layer module, state;

/* 레이어 우선순위 */
/* 3 */
@layer state {
  p.alert { background-color: purple; }
  p { border: medium solid limegreen; padding: 2em; }
}

/* 4 */
@layer module {
  .alert {
    border: medium solid violet; color: white;
  }
  p{ padding: 1em; }
  p.alert{ background: red ; }
}

/* 2 */
@layer{
  p.alert { background: blue ; }
}

/* 1 */
p.alert{ background: gray; }

@layer와 !important 우선순위

@layer와 !important가 함께 선언된 경우 우선순위가 반대로 적용된다

/* @layer + !important 우선순위 */
/* 2 */
@layer state {
  p.alert { background-color: purple ; }
  p { border: medium solid limegreen; padding: 2em; }
}

/* 1 */
@layer module {
  .alert {
    border: medium solid violet; color: white;
  }
  p{ padding: 1em; }
  p.alert{ background: red ; }
}

/* 3 */
@layer{
  p.alert { background: blue !important; }
}

/* 4 */
p.alert{ background: gray !important; }