@layer - css

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

• 스타일 우선순위를 정한다.

@layer module, state;

@layer state {
  .alert {
    background-color: brown;
  }
  p {
    border: medium solid limegreen;
  }
}

@layer module {
  .alert {
    border: medium solid violet;
    background-color: yellow;
    color: white;
  }
}

• 위와 같이 쓰면 state -> module 이 순으로 작성되었음에도 불구하고 상위에서 module, state 로 레이어 정의를 해서 , state 레이어가 더 우선순위가 높음
• 언제 쓸 수 있을까?
  • 스타일 옵션이 많아질 때
  • 예를들어 base 스타일이 있고, mobile 스타일이 있고, 등등..이럴 때 레이어링 해서 쓰면 우선순위 정렬하기 편하지 않을까?
• 매번 해당 요소마다 명시도 (specificity)컨트롤 해줄 필요는 없어질 것 같고, 뷰포트별로 스타일이 베이스 스타일과 상이해야할 때 유용할듯!
• 알게 된 경위는 쇼피파이에서 해당 기능을 사용하여 css 를 레이어링한다.
  • 미디어쿼리로 감싸서 뷰포트에 따라서 레이어링을 다르게 처리해줌