styling

style 객체와 className은 바꾸려는 범위가 다르다

반복되는 시각 규칙은 className으로 고정하고, 런타임 값이 직접 변하는 작은 부분만 style 객체로 제한한다.

className CSS 규칙 재사용hover/media 가능디자인 일관성
style 객체 동적 숫자나 색우선순위 높음반응형/상태 스타일 약함
상황
권장
이유
공통 버튼
className
일관된 스타일
progress width
style
값이 매번 달라짐
hover/focus
className
CSS 상태 선택자
테마 색
CSS 변수
토큰 유지
핵심 인라인 style은 편해서 쓰는 도구가 아니라 런타임 값이 정말 필요한 좁은 영역에 쓰는 도구다.