CSS 적용 우선순위 (Specificity), JS로 style 다루기

두 줄 요약

CSS 적용 순서 : !important;(사용금지) > inline > id > class > tag
inline CSS 모두 날리기 : element.style = "";

---

출처는 이번에도 Kyle 형님이다. 대단한 형님이다. 공부한 내용을 정리해본다.

youtu.be/CHyPGSpIhSs

---

코드펜

See the Pen CSS Specificity Practice by Richard JEON (@hj-rich) on CodePen.

 

 

---

정리스샷

---

CSS 적용에 관한 명확도 규칙 : CSS Specificity

1. 명확하게 지칭할수록 적용순위가 높다.

!important > inline > id > class > tag (단, important는 절대 사용하지 않는다. NAVER)

2. 마치 금은동 메달 순위 매기는 것처럼 상위 계층 명확도가 높으면 하위 계층은 비교하지 않는다.

3. 동일 계층에서 명확도가 동일할 경우, 하위 계층 명확도를 비교해서 우선순위를 매긴다. ( div.myClass > .myClass )

 

CSS 관련 학습 정리

1. 크롬 개발자도구의 Styles 탭에서 Overwrite 되어 무시된 스타일 목록을 확인할 수 있다.

2. inline으로 들어간 스타일을 모두 제거하고 싶다면 element.style="" 로 없애버릴 수 있다.

3. 특정 요소에 inline으로 스타일을 주거나 수정하려면 element.style.color = "red" 식으로 줘야 한다.

4. 특정 요소에 inline으로 적용된 스타일을 확인하려면
[개발자도구]-[Styles 탭] element.style을 보거나 콘솔에서 element.style[0,1...] 로 확인할 수 있다.

 

---

소감

크롬 개발자도구의 Style 탭에 나오는 순서가 코드 순서 그대로 나오는 것 같다.
아무래도 선언 위치가 적용 우선순위와 연결이 되다 보니 그런 것 같다.
그 와중에도 overwrite 된 것들을 strikethrough 해주는 섬세함 보면 참... 대단하다 구글.
important와 inline 스타일링은 정말 지양해야겠다.

간혹 사용하는 라이브러리에서 inline으로 style을 먹이는 경우가 있어서 난처했는데
앞으로는 인라인 스타일을 한방에 날려버리는 방법을 활용해서 좀 더 쉽게 갈 수 있을 것 같다.