# CSS 우선순위란?
CSS 우선순위는 브라우저가 특정 요소에 어떤 속성 값을 적용할지 결정하는 알고리즘입니다. 쉽게 말해 규칙이 "얼마나 구체적인지"를 브라우저에 알려주는 수학적 점수입니다.두 규칙의 우선순위가 다르면, 작성 순서와 관계없이 가중치가 높은 쪽이 이깁니다. 가중치가 같으면 소스 코드에서 나중에 선언된 것이 적용됩니다.# CSS 우선순위 계산 방법
우선순위는 세 가지 범주를 기반으로 계산되어 (A, B, C)라는 세 열의 가중치로 표현됩니다:- 열 A (ID): 고유 식별자의 수를 셉니다. 예:
#header는 열 A에서 1로 계산됩니다. - 열 B (클래스, 속성, 가상 클래스): 모든 클래스(
.button), 속성([type="text"]), 가상 클래스(:hover)를 셉니다. - 열 C (요소, 가상 요소): 모든 HTML 요소(
div,h1)와 가상 요소(::before)를 셉니다.
# 황금 규칙: 열 간 자리 올림은 없다
우선순위가 (0,50,0)인 규칙은 (1,0,0)인 규칙보다 절대로 강해질 수 없습니다. ID 하나가 클래스 수백 개를 이깁니다. 열은 서로 넘쳐흐르지 않습니다.
# !important의 문제점과 BEM 아키텍처
!important는 우선순위 규칙의 예외입니다. 사용하면 해당 선언이 다른 모든 규칙을 자동으로 덮어씁니다. 자연스러운 캐스케이드를 파괴하기 때문에 나쁜 관행으로 여겨집니다.대규모 프로젝트에서 우선순위 충돌을 피하기 위해 BEM과 같은 방법론은 단일 깊이의 클래스 선택자만 사용하여 우선순위를 (0,1,0)으로 평평하게 유지하는 것을 권장합니다.