서로 다른 컴포넌트의 CSS 선택자는 왜 충돌하나요?

이렇게 답해 보세요 (핵심 답변)

JavaScript 파일이 모듈별로 분리되어 있더라도 일반 .css 파일을 import하면 빌드 후에는 하나의 전역 스타일시트 규칙으로 문서 전체에 적용되기 때문입니다. 따라서 서로 다른 컴포넌트에서 우연히 같은 클래스 이름(.title, .card 등)을 사용하면 CSS의 명시도(specificity)와 선언 순서(cascade)에 따라 나중에 로드된 스타일이 다른 컴포넌트의 화면을 덮어쓰게 됩니다. 이를 방지하려면 CSS Modules나 스코프 스타일 도구로 클래스 이름을 고유하게 변환하거나, BEM 같은 명명 규칙과 레이어 정책을 일관되게 적용해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. JavaScript의 모듈 스코프와 브라우저 CSS 선택자의 전역 매칭 범위는 서로 별개로 동작합니다.
2. 코드 분할(Code Splitting)로 특정 페이지 진입 시 CSS가 동적으로 로드되면 페이지 이동 순서에 따라 스타일 충돌 결과가 달라지는 까다로운 버그가 생길 수 있습니다.

면접에서 자주 하는 실수

CSS 파일을 컴포넌트 폴더마다 따로 나누어 작성했다는 사실만으로 스타일이 해당 컴포넌트 안에만 자동 격리된다고 생각하면 안 됩니다.