CSS의 Cascading

Cascading이란?

• 여러 개의 스타일 규칙이 있을 때, 캐스케이드 우선순위에 따라 최종 스타일을 결정하는 과정을 의미합니다.
• 여기서 "cascading"은 "폭포처럼 순서대로 내려가는"이라는 의미로 사용됩니다.

캐스케이드 우선순위(Cascade precedence)

1. Origin and importance
   • 1-1 CSS transitions
   • 1-2 user-agent (browser) !important
   • 1-3 user !important
   • 1-4 author(developer) !important
   • 1-5 CSS @keyframe animations
   • 1-6 inline style definition(developer)
   • 1-7 author(developer)
   • 1-8 user
   • 1-9 user-agent (browser)
   • !important와 inline style definition은 스타일 디버깅을 어렵게 만든다.
2. 명시도(Specificity)
   • 2-1 아이디(IDs)
   • 2-2 클래스(Classes), 속성(attributes), 가상클래스(pseudo-classes)
   • 2-3 요소(Elements), 가상요소(pseudo-elements)
3. 상속된 스타일(Inherited style)
   • 부모 태그에 적용된 CSS 규칙은 자손에게도 상속됩니다.
   • 모든 속성이 상속되는 건 아니고, 상속되는 속성(color, font-family, font-size, font-weight, line-height, text-align, ... 등)들이 정해져 있습니다.
     • Full property table,
       inheritance - Which CSS properties are inherited? - Stack Overflow 참조
   • 가까운 조상에게 물려받은 속성일수록 우선순위가 높습니다.
4. 코드 상의 순서
   • 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다.

참고

• 계단식 및 상속 - Web 개발 학습하기 | MDN
• 명시도 - CSS: Cascading Style Sheets | MDN
• Specifishity :: Specificity with Fish