CSS : CASCADE

CASCADE ?

HTML element 는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다. 이를 캐스캐이딩 이라고 하며 CSS의 정식 명칭은 Cascading Style Sheets인 만큼 중요하다는 것을 알 수 있다.

캐스캐이딩은 다음 3가지에 의해 결정된다.

• CSS가 어디에서 선언되었는지 (중요도)
• 대상을 명확하게 지정할수록 (명시도)
• 코드 순서

---

Cascade 의 중요도

• head의 Style
• head의 style 내의 @import
• link로 연결된 CSS 파일
• link로 연결된 CSS 파일 내의 @import
• 브라우저의 기본 CSS

---

Cascade 의 명시도

• !important : { color : red !important} 와 같이 사용하며, 명시적으로 만듬
• inline 스타일
• 아이디 selector
• 클래스 / 가상 선택자
• 태그 선택자
• 상속된 스타일

!important는 거의 우선순위가 가장 높지만 남용해서는 안된다.
inline 역시 높은 우선순위를 갖지만, style이나 외부 CSS 파일로 빼는 것이 좋다.

코드 순서

<style>

  p {
    color: red;
  }
  p {
    color:blue;
  }

</style>

<div>
  <p>Hello</p>
</div

--> 해당 Hello의 글자색은 blue이다.

---

Specificity Calculator (특이도 계산)

<style>

  div p {
    color: red;
  }
  p {
    color:blue;
  }

</style>

<div>
  <p>Hello</p>
</div>

해당 Hello의 글자색은 코드 순서로만 보면 파란색이 되어야 하는데 실제로 결과는 빨간색이다. 이유가 뭘까 ?

div,p 두 요소에 대해 스타일을 적용시키는 부분 2점 , p 요소에 대해서만 스타일 적용시키는 부분 1점으로 인해 점수가 더 높은 첫 CSS 적용 부분이 최종 적용 부분이 되는 것이다.

• 보다 구체적인 선택자에 대해 CSS 를 적용시킨다.
  
  

기억해두어야 할 일반 공식

ID > CLASS > ELEMENT

• ID : ID Selectors
• CLASS : Class, Attribute, & pseudo-class selector
• ELEMENT : element and pseudo-element Selectors

https://specificity.keegan.st/ (speciticity calculator 사이트)