스타일 결정 우선순위

I. Style sheet priority

출처: http://praveen-vemulapalli.blogspot.com/2013/01/user-vs-author-vs-user-agent-style.html

 

Microsoft Edge 같은 경우 Stylish 같은 extension 사용해서 user style sheet 세팅 가능

 

 

Note

 

왜 하필 user important > author important > user normal > author normal > browser  순서로 정했을까?

 

user important > author important는 저시력자가 글자 크기를 키워야 하는 등의 이유로 반드시 필요하다.

 

그런데 왜 author normal > user normal 일까?

 

이건 내 추측에 불과하지만 user가 author style sheet의 내부 동작을 구분할 필요가 없도록 설계가 된 것 같다. 어떻게 보면 user가 author important style과 author normal style의 차이를 구분하고 그 사잇단에 개입하는 것이 author의 권한을 침범한다는 점에서 더 이상해보이기도 한다.

 

이런 점에서 user는 author style sheet를 덮어씌워야 할만큼 중요한 style이라면 !important 설정을 하고, 그렇지 않다면 그냥 author style sheet를 따르면 된다. 즉, user는 user important > author > user normal 순서만 생각하면 된다. 

 

요약하자면 user normal은 author가 따로 설정해두지 않은 style을 세팅해주는 customization이고, user important는 author가 설정해둔 style까지 덮어씌우는 customization이다.

 

II. Specificity

우선 inline style은 가장 specificity가 높다.

 

inline style이 아닐 경우, 즉 internal or external style일 경우, id - class - selector 로 score를 계산한다.

 

Example

출처: https://www.boostcourse.org/cs120/lecture/92904

 

III. Inheritance

출처: https://www.boostcourse.org/cs120/lecture/92905

특정 속성들은 상속이 가능하다. 상속 가능성/불가능성은 굉장히 상식적으로 결정된다. specificity score가 0-0-0 이더라도 inheritance 보다 우선한다는 점을 주의해야 한다.

 

 

IV. Order

구체성, 상속 여부에서 아무런 차이가 없다면 코드 순서로 적용할 스타일을 결정한다. 나중에 나오는 코드가 먼저 나오는 코드를 덮어 씌운다.