컴포넌트 템플릿을 리팩토링해서 컨테이너 쿼리를 더 잘 지원하고 싶습니다. 컨테이너를 자기 자신에 대해 쿼리할 수 없었기 때문에 몇 가지 추가 래퍼가 필요합니다. 하지만 이렇게 하면 래핑 요소의 이름을 어떻게 지어야 할지 고민이 됩니다. 제 템플릿을 보면 보통 가장 바깥 요소에 wrapper, 안쪽 요소에 container라는 이름을 붙이는 것이 저의 일반적인 네이밍 규칙입니다.
.component {
&__wrapper {
}
&__container {
}
}
이 방식은 꽤 잘 맞는다고 생각했습니다. 하지만 컨테이너 쿼리를 사용하려면 항상 바깥쪽 요소를 컨테이너로 선언해야 합니다. 래퍼를 컨테이너로 선언하는 것은 직관적이지 않을 수 있습니다. 아래처럼 보이는 것이 훨씬 낫습니다:
![]()
혹시 이 부분에 대해 컨벤션이나 좋은 접근 방식에 대해 생각해 본 분이 있을까요? 아마 제가 너무 과민반응하는 것일지도 모르겠습니다
하지만 템플릿을 리팩토링하면 브레이킹 체인지가 되므로, 무턱대고 진행하고 싶지는 않습니다.