[T-005] 컴포넌트의 스타일 자율성 지키기

tight coupling을 만드는 스타일링 패턴은 안 쓰려고 하는 편이에요. '& OO'나 'OO &' 같은 selector를 쓰는 패턴이 대표적인데요. 컴포넌트 간의 강한 결합을 만들어내요. 한 컴포넌트가 다른 컴포넌트의 내부 구조와 선택자명에 직접적으로 의존하게 되고, 특정 DOM 계층 구조를 전제로 스타일을 정의하게 되죠. 이는 여러 문제를 야기해요.

• 컴포넌트의 캡슐화가 깨져요
• 스타일 우선순위(specificity) 문제가 발생해요
• 컴포넌트 재사용성이 저하돼요
• 리팩토링 시 사이드 이펙트 발생 위험이 높아져요
• 스타일 변화의 예측과 디버깅이 어려워져요

컴포넌트 기반 아키텍쳐에서는 컴포넌트가 자신의 스타일링에 대한 단일 책임만 가지는 게 좋다고 생각해요. 다른 컴포넌트와의 상호작용이 필요하다면, variants를 통한 prop 인터페이스로 제공하는 게 단방향적이고, 더 선언적이고, 안전한 접근이 아닐까요?