어쩌면 !important가 필요없을지도? CSS의 우선순위

css

얼마전 스터디에서 처음배우는 HTML, CSS라는 주제로 강의를 할일이 있었는데 듣던 분중에서 포인트에 대해서도 언급을 하면 좋을것 같다는 의견을 주신 분이 계셨었습니다. 당시에는 기억나는것도 없고해서 모른다고 했었는데 어디서 주워 들었던 것 같기도 한 가물가물한 기억이 있어 찾아보게 되었고 다행하게도 지금까지 가지고 있던 CSS의 룰과 다른점은 없었으나 ‘점수’로 구분을 주는 방식은 생각지 않았었기에 새롭게 알 수 있는 부분이 있었습니다.

개념상으로 우선순위를 점수로 계산하는 방법을 실제로 도입하기에는 애매한 부분이 없지 않지만 하나의 기준은 될 것 같습니다. CSS의 셀렉터가 기본적으로 가지고 있는 우선순위를 점수로 계산하여 높은 순서대로 적용된다는 점은 주의가 필요하겠습니다.

 

CSS 우선순위에 따른 점수표
지정방법 예제 점수
!important !important ???
직접기입 style=”” 1000점
ID #sample 100점
Class .sample 10점
속성선택자 a[href*=”sample”] 10점
가상클래스속성 :first-child 10점
태그선택자 ul 1점
전체선택 * 0점

 

상기의 점수표를 기준으로 몇가지 예제를 확인해 보겠습니다. 실제로 점수는 아래와 같은 방식으로 채점 되어집니다.

 

CSS 우선순위에 따른 계산예제
지정방법 예제 점수
!important color: #C00 !important; 최우선
style=”” 1000(style=””) 1000점
#sample 100(#sample) 100점
li.color.label 1(li) + 10(.color) + 10(.label) 21점
table tr td.color 1(table) + 1(tr) +  1(td) + 10(.color) 13점
li:last-child 1(li) + 10(:last-child) 11점
div + *[href=”com”] 1(div) + 0(*) + 10([href=”com”]) 11점
h1 div + span 1(h1) + 1(div) + 1(span) 3점
li 1(li) 1점

 

간단하게 샘플로 확인을 해 보았습니다. ID가 100점이고 Class의 합이 100점을 넘을 경우 어떻게 되는가를 시험해 본 경우입니다.

 

See the Pen css 우선순위 by minamiland (@minamiland) on CodePen.

 

결과를 보시면 아시겠지만, Class가 총 12개로 120점이며 폰트색상을 #C00로 지정했지만, ID에서 지정된 폰트색상 #333에 영향을 미치질 못합니다. .a.b.a .b처럼 Class사이를 붙여서 사용할 경우나 Class사이를 띄워서 사용하는 경우에도 ID에 영향을 미치지는 못하는것 같습니다. 결국 ID와 Class사이에는 점수가 영향을 미치지 못한다는 결론이 나오는거겠죠?! 그럼 !important의 경우는 어떨까요?

 

See the Pen css 우선순위 by minamiland (@minamiland) on CodePen.

 

!important를 사용하면 위의 예제처럼 이러한 기존의 룰이 깨져 버립니다. 이정도로 !important는 강력한 녀석이니 사용에 주의를 하는것이 좋겠습니다.

 

참고:
http://www.nextree.co.kr/p8468/
http://www.clearboth.org/css3_1_by_isdn386/
http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
http://creator.aainc.co.jp/archives/4947

(Visited 8,562 times, 3 visits today)

sapjil

서울거주의 회사원으로 DESIGN/HTML/CSS를 생업으로 하고 있는 마크업 엔지니어 입니다. 프론트엔드 엔지니어로 거듭나고자 틈틈이 JavaScript를 공부하고 있습니다. 이 블로그 SAPJIL에서는 웹 사이트 제작에 필요한, 삽질을 줄일 수 있는 정보를 공유합니다.

4 thoughts on “어쩌면 !important가 필요없을지도? CSS의 우선순위

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다