신비한 개발사전

CSS를 쓸 때 가장 어려운 부분이 명시도(specificity)인 것 같다. BEM을 아무리 잘 따라도 사람이 사람과 코드를 짜는 이상 절대적인 컨벤션에 도달하기 어렵다고 생각한다. 만약 styled-components나 Tailwind 같은 툴을 쓰지 않는다면 CSS 클래스 네이밍에 신경써야 할 텐데, 이때 활용해볼 수 있는게 @scope다. @scope는 CSS 규칙을 적용할 범위를 스코핑해주는 아주 중요한 키워드다. 투명한 선을 그어서 네 구역 내 구역을 나눠주는 셈이다. 클래스끼리 엮는 것보다는 명시도가 가장 낮은 DOM 엘리먼트를 타겟팅해야 하는 상황에서 더 빛을 발하는데, 예시로 아래처럼 사용할 수 있다.@scope (.card) { img { border-color: green; ..