이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ specificity 4자리 (inline > id > class > tag) 계산
• ▸✅ !important 가 마지막 수단 인 이유
• ▸✅ BEM 컨벤션으로 specificity 평탄화

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

핵심 한 줄

여러 CSS 규칙이 같은 요소 에 적용되면, 명시도 (Specificity) 가 높은 규칙이 이깁니다. 같으면 나중에 쓴 규칙 승.

점수 계산

각 선택자에 4자리 숫자 점수가 매겨집니다:

선택자                점수 (a,b,c,d)
─────────────────────────────────
* (전체)              0,0,0,0
태그·가상요소         0,0,0,1
클래스·가상클래스·속성  0,0,1,0
ID                  0,1,0,0
inline style        1,0,0,0
!important          (특수, 모두 무시)

예시:

• ▸p → 0,0,0,1
• ▸.card → 0,0,1,0
• ▸.card p → 0,0,1,1
• ▸#main .card p → 0,1,1,1
• ▸<p style="..."> → 1,0,0,0
• ▸... !important → 무조건

자주 겪는 충돌

<button class="btn btn-primary" id="submit">전송</button>

.btn { background: gray; }            /* 0,0,1,0 */
.btn-primary { background: blue; }    /* 0,0,1,0 — 같지만 늦게 작성됨 → 승 */
button { background: white; }         /* 0,0,0,1 — 짐 */
#submit { background: red; }          /* 0,1,0,0 — 가장 강함 → 승 */

ID 가 가장 셉니다. 그래서 ID 로 스타일 주면 나중에 못 덮어쓰는 함정에 빠집니다.

!important — 마지막 수단

.urgent { color: red !important; }

다른 모든 규칙을 무시 합니다. 강력하지만 남용 금지. 한 번 쓰면 다른 곳에서도 !important 폭증 — 결국 !important 끼리 충돌 의 지옥.

언제만 OK?:

• ▸외부 라이브러리 스타일 강제 덮어쓰기
• ▸유틸리티 클래스 (Tailwind 처럼)
• ▸그 외엔 명시도로 해결 하세요

우선순위 정리

높은 순:
1. !important (특수)
2. inline style (style="...")
3. ID 선택자
4. 클래스·가상클래스·속성
5. 태그·가상요소
6. 전체 (*)

같은 점수면 나중에 쓴 규칙 승.

한 번 정리

명시도는 충돌 시 누가 이기는가 의 규칙. 클래스만 사용 하면 거의 평평한 명시도 → 충돌 ↓. ID·!important 남용은 유지보수 지옥.

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 HTML/CSS 에 명시도 — 누가 이기는가 개념을 적용해 리팩토링해줘"
• ▸"명시도 — 누가 이기는가 와 관련한 접근성·SEO 점검해줘"
• ▸"Tailwind 클래스로 같은 결과 만들어줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.