로컬 클래스 사용
module 파일을 import하고 styles.card처럼 객체 속성으로 className을 연결한다.
문자열 class 이름을 직접 쓰면 해시와 맞지 않는다전역 예외 처리
html, body, third-party selector는 global CSS나 :global을 명시적으로 사용한다.
전역 예외를 작게 유지한다조건부 조합
상태별 class는 배열, clsx, template 조합으로 명확히 만들고 undefined를 피한다.
동적 key 오타는 런타임에서 조용히 빠진다우선순위 확인
module class, global class, CSS variable, cascade layer가 의도대로 적용되는지 DevTools에서 본다.
scoped라고 cascade가 사라지지는 않는다module
컴포넌트 지역 스타일
카드, 버튼, 섹션처럼 특정 컴포넌트에 닫힌 스타일에
적합하다.
클래스 충돌을 줄인다
global
앱 전체 규칙
reset, font face, CSS variable, body 배경처럼 전역 계약에
쓴다.
범위를 넓히기 전에 이유를 둔다
:global
예외적 전역 선택자
서드파티 DOM이나 외부 라이브러리 selector를 다룰 때
사용한다.
남용하면 module 장점이 줄어든다
tokens
일관된 값
색상과 spacing 반복은 CSS variable이나 theme token으로
모은다.
임의값 중복을 줄인다