CSS #1 - CSS priority

HTML, CSS, JS 모두 방패 모양이네요.

CSS

CSS(Cascade Style Sheet)는 종속형 시트라 고도 불리며, 마크업 언어가 실제 표시되는 방법을 기술하는 언어입니다. 마크업 언어라는 것은 태그를 사용하여 문서의 내용과 구조를 나타내는 언어를 말하는데, HTML도 그 이름(HyperText Mark-up Language)에서 알 수 있듯이 마크업 언어의 일종입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때 자유도가 높습니다. (www.w3schools.com/css)

CSS 우선순위

CSS정보는 다양한 원천으로부터 제공받을 수 있고 이러한 원천으로는 제작자, 사용자, 웹 브라우저가 될 수 있습니다. 다음과 같은 우선순위를 가집니다.

 

1. Author Style (제작자)

개발자가 source code를 작성하는 것에 대한 원천을 의미합니다.

 

우선순위	CSS 원천의 종류	비고
1) !important	중요성	‘!important’은 이전의 우선 타입들을 덮어씁니다. CSS코드의 디버그가 어려워 져서 사용하는 것을 지양해야 하지만, bootstrap / rsuite등의 CSS framework을 사용할 때 스타일을 override하기 위해서 사용하기도 합니다. 저는 그래도 추가 CSS파일로 override하는 것이 좋다고 생각합니다.
2) <p style="color:#ff0a00">	인라인	HTML 'style' 속성을 통해 HTML 요소에 적용됩니다.
3) <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px" href="my_style.css">	미디어 타입	미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티 정의는 모든 미디어 타입에 적용되며 정의에 따라 분기 처리가 가능합니다.
4) :root { --main-bg-color: brown } element { color: var(--main-bg-color) }	사용자 정의	대부분의 브라우저가 접근성 기능을 갖추고 있습니다. (developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties)
5) #myId { color: red } .My-Class { color: blue } p { color: green }	셀렉터 특정성	id selector > class, pseudo-class(마우스 hover나 focus등에 해당, www.w3schools.com/css/css_pseudo_classes.asp) selector > element selector 순으로 우선순위를 가집니다.
6) .My-Class { color: red } .My-Class { color: blue }	규칙 순서	마지막 규칙 선언은 가장 높은 우선 순위를 가집니다. 즉 override가 됩니다.
7) body { color: gray }	부모 상속	프로퍼티를 지정하지 않으면, 부모 요소에 상속을 받습니다.

2. User Style (사용자)

사용자가 브라우저의 스타일을 설정하는 것을 의미합니다. 대표적인 예로는 다크 모드가 있으며, Firefox의 경우는 config파일을 열어서 수정할 수 있습니다. (support.mozilla.org/ko/kb/about-config-editor-firefox)

 

3. User Agent Style (웹 브라우저)

웹 브라우저가 제공하는 스타일을 의미합니다. chrome / safari / internet explorer의 서로 다른 스크롤 바 스타일이 대표적인 예입니다.

 

1 > 2 > 3의 순으로 우선순위를 가지며, Author Style에서도 사용에 따라서 우선순위가 적용됩니다. 가장 중요한 것은 CSS파일을 작성하는 것에 있어서 정말 필요한 부분에 대해서만 작성하고 중복된 적용을 최대한 줄이는 것입니다. 불필요한 부분과 중복 적용은 디버깅을 어렵게 합니다. 중복된 코드로 인해 CSS파일의 용량이 커진다는 것은 CSS를 파싱 해서 CSSOM을 완료하기까지 시간이 더 걸린다는 것을 의미합니다. 브라우저의 자바스크립트 엔진 (V8, JavascriptEngine,...)은 CSSOM의 생성까지 자바스크립트 파일에 대한 파싱을 지연하기 때문에 사용자의 경험을 저하시킬 수 있기 때문입니다.