Cascade Layers Check

@layer components { #app .card .title { color: navy } } 와 레이어 밖의 .title { color: crimson } 이 함께 있습니다. 제목 색은?

• crimson — 레이어 밖은 맨 마지막 레이어라 일반 선언에서 가장 세다
• navy — 특정성 1,2,0 이 0,1,0 을 이긴다
• navy — 레이어 안의 선언이 언제나 밖보다 우선한다
• 정해지지 않는다 — 브라우저 구현에 따라 달라진다

@layer reset, components; 로 선언하고 두 레이어 모두에 !important 색 규칙을 두면 어느 쪽이 이깁니까?

• components — 뒤에 선언한 레이어가 언제나 이긴다
• reset — important 선언끼리는 앞 레이어가 이긴다
• 특정성이 높은 쪽 — important 끼리는 특정성으로만 갈린다
• 둘 다 무시된다 — important 가 부딪히면 초기값으로 돌아간다

레이어 밖에 쓴 !important 선언의 위치는?

• 모든 레이어의 important 보다 세다 — 밖이 언제나 우선한다
• 레이어 안의 일반 선언과 같은 자리에서 특정성으로 겨룬다
• 모든 레이어의 important 에 진다 — 암묵 마지막 레이어이기 때문이다
• 레이어를 쓴 시트에서는 아예 무시되어 적용되지 않는다

라이브러리가 덮어쓰기 쉬운 기본값을 주려고 :where() 를 쓰는 이유는?

• 괄호 안이 몇 개든 특정성이 0 이라 태그 선택자에도 진다
• 괄호 안에서 가장 높은 조각의 특정성을 그대로 따라간다
• 레이어 밖 선언과 같은 자리로 옮겨 주기 때문이다
• important 를 붙이지 않아도 앞 레이어처럼 동작해서다

레이어 순서를 파일 맨 위에 @layer a, b, c; 로 미리 선언하는 이유는?

• 순서가 이름이 처음 나온 차례로 정해져 파일 읽는 순서에 흔들려서
• 그렇게 하지 않으면 브라우저가 레이어를 아예 인식하지 않아서
• 선언형 규칙이 있어야 @import 에 layer() 를 붙일 수 있어서
• 레이어마다 별도 파일로 나누지 않으면 문법 오류가 나서

남의 라이브러리 CSS 를 내 코드보다 항상 약하게 만들려면?

• 라이브러리 규칙마다 :where() 를 감싸 특정성을 0 으로 만든다
• @import url(lib.css) layer(vendor); 로 한 레이어에 밀어 넣고 그 레이어를 먼저 선언한다
• 내 규칙 전부에 !important 를 붙여 라이브러리를 덮는다
• 라이브러리를 가장 나중에 읽히도록 번들 순서를 바꾼다