CSS 명시도(Specificity)와 cascade 규칙을 설명해주세요.

CSS는 중요도, 출처, 명시도, 선언 순서에 따라 최종 스타일을 결정합니다. 명시도가 과도하게 높으면 유지보수가 어려워 낮고 예측 가능한 선택자를 유지하는 것이 좋습니다.

핵심 개념

핵심 기준은 선택자 점수와 선언 우선순위입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

CSS는 cascade, layout, stacking context가 함께 동작합니다. 작은 속성 하나가 화면 전체의 배치나 접근성에 영향을 줄 수 있어 동작 원리를 알고 써야 합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.card {
  box-sizing: border-box;
  padding: 16px;
}

레이아웃은 고정값보다 콘텐츠와 컨테이너의 크기에 반응하도록 만드는 것이 안전합니다.

실무에서 주의할 점

• 속성 하나가 새로운 formatting context나 stacking context를 만들 수 있습니다.
• 고정 크기만으로 반응형을 처리하면 작은 화면에서 쉽게 깨집니다.
• 포커스 스타일과 색 대비를 제거하면 접근성이 크게 나빠집니다.

함께 연결해서 보면 좋은 키워드

CSS, Specificity, Cascade, 스타일

정리

한 줄로 정리하면, CSS는 중요도, 출처, 명시도, 선언 순서에 따라 최종 스타일을 결정합니다. 명시도가 과도하게 높으면 유지보수가 어려워 낮고 예측 가능한 선택자를 유지하는 것이 좋습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

Cascade와 명시도

CSS에서 최종 스타일은 출처(origin), 중요도(!important), cascade layer, 명시도, 선언 순서에 따라 결정됩니다. 명시도는 selector가 얼마나 구체적인지 계산하는 규칙입니다.

button { color: black; }           /* 0-0-1 */
.btn { color: blue; }              /* 0-1-0 */
#submit { color: red; }            /* 1-0-0 */

명시도 낮게 유지하기

/* ❌ 너무 구체적 */
.page .sidebar ul li a.active { color: red; }

/* ✅ 컴포넌트 클래스 중심 */
.navLink.isActive { color: red; }

명시도가 높아지면 나중에 덮어쓰기 위해 더 강한 selector나 !important를 쓰게 되는 악순환이 생깁니다.

실무 팁

• 컴포넌트 단위 클래스와 CSS Modules/BEM을 활용합니다.
• !important는 유틸리티나 예외 상황에 제한합니다.
• :where()는 명시도가 0이라 reset/base style에 유용합니다.
• DevTools의 Computed 탭에서 어떤 규칙이 이겼는지 확인합니다.