Photo by Dylan Sauerwein on Unsplash

Cascading Style Sheets(CSS)에서 Cascading 사전적 의미는 폭포 혹은 위에서 아래로 내려가는 것을 의미합니다. 즉 CSS는 우선순위에 따라 적용되기 때문에 스타일을 적용할 때 우선순위를 고려하여 코드를 작성하는 것이 중요합니다.

스타일 우선순위(CSS Style Precedence)

우선순위를 쉽게 이해하기 위해 특정도 점수를 사용하기도 합니다. 이해를 위한 것이지 실제 원리에서 중요한건 우선순위입니다.

1. 속성값 뒤의 !important (10000점)
2. 인라인 스타일 (1000점)
3. id (100점)
4. class ( 10점 )
5. 태그선택자 = 요소명 지정 (1점)

동일 요소일 때, 하단에 마크업 요소 + 0.1점

마크업시 우선순위가 높은 속성으로 구성하다보면 추후 수정이 어려울 때가 많습니다. 가능한 태그 선택자와 시맨틱요소 그리고 dom구조를 잘 활용하면 보다 가볍고 수정이 용이한 코드가 될 수 있습니다.