역할·상태·변형을 예측 가능한 이름과 계층으로 관리합니다.
실무 CSS는 한 화면을 꾸미는 것보다 변경 범위를 통제하는 것이 중요합니다. 낮은 specificity, 명확한 컴포넌트 경계, 토큰과 상태 이름으로 규칙의 소유권을 드러냅니다.
reset·base·component·utility의 순서를 cascade layer로 정하고 컴포넌트는 class 하나를 중심으로 작성합니다.
색·간격·글꼴은 사용자 정의 속성으로 의미 있는 토큰을 만들되 모든 숫자를 변수화하지 않습니다.
hover뿐 아니라 focus-visible, disabled, loading, error와 긴 번역 문자열 상태를 함께 설계합니다.
DOM 구조에 깊게 의존한 선택자는 마크업 변경 때 연쇄적으로 깨집니다.
직접 바꿔보세요버튼에 danger 변형과 disabled 상태를 추가하되 !important를 쓰지 마세요.