[CSS] CSS 작성 시 유의할 점

css selector 동작 원리에 대해 알아보던 중 이에 대한 내용 및 css 작성 시 유의할 점에 대해 정리된 포스팅을 읽고 기억하고자 내용을 조금 추가하여 정리하였다. 앞서 언급한 포스팅은 Mason Shin 님이 작성하신 원문 Common Mistakes on Your CSS을 번역, 편집한 글로, 원문과 편집 및 번역글에 대한 출처를 밝힌다.
원문 - Common Mistakes on Your CSS
번역 및 편집글 - CSS를 쓸 때 자주 하는 실수들

💡 스타일 reset 하기

브라우저 간의 상이한 스타일을 통일하기 위해(=크로스 브라우징을 위해)서 스타일을 반드시 reset 하여 작업하자.
가장 많이 사용하는 css reset으로는 Reset.css, Normalize.css가 있다.

• Reset.css : 브라우저 마다 각기 다른 default 스타일을 초기화해주는 파일.
• Normalize.css : 브라우저 마다 다른 default 스타일을 적절한 값으로 초기화해주는 파일.

예를 들면 reset.css는 h1,sub,div,span 등의 태그들을 동일하게 기본값으로 초기화하지만 nornormalize.css는 h1은 font-size: 2em; 속성을 적용하거나 sub는 font-size: 75%; 로 적용하는 등, 각 태그에 맞는 적절한 값으로 초기화한다는 점이 다르다.

💡 :와 :: 구분하기

:는 가상 클래스(pseudo-class)를 의미.
ex) :hover, :active, :focus, :link, :checked, :not(), :disabled, :nth-of-type() 등

::는 가상 요소(pseudo-element)를 의미.
ex) ::after, ::before, ::first-letter등

최신브라우저는 :: 대신 :을 사용해도 인식하지만 IE8 과 같은 브라우저에서는 정확하게 사용해주어야 한다.

💡 과도한 선택자 사용 지양하기

과도하게 선택자(selector)를 사용하는 것을 피해야 한다.
예를 들어 아래와 같은 경우,

header#main-header ul > li a

#main-header 가 이미 id selector라 고유한 선택자이기 때문에 앞의 header 태그는 필요가 없다. 또한 만약 모든 a태그가 ul > li 안에 있다면 ul > li 조건도 필요가 없게 된다. 게다가 이러한 과도한 선택자 사용은 다른 곳에서 스타일을 덮어씌우려고 할 경우 선택자 경로를 모두 따라가야 하므로 스타일 관리가 어렵다. 따라서 상황에 맞게 선택자는 가능한 한 짧게 쓰도록 하자.

💡 중첩 선택자 사용을 최대한 피하기

css selector의 동작 원리를 알면 중첩 선택자 사용을 최대한 피해야한다는 것을 알 수 있다.
브라우저는 css 선택자를 오른쪽에서 왼쪽으로 검사한다. 예를 들어 ul > li a라는 선택자가 있을 경우 다음과 같이 동작한다.

1. 모든 a 태그를 탐색
2. 각각의 a 태그가 li태그를 부모로 갖는지 검사
3. 조건에 부합하는 각각의li태그가 ul을 직접적인 부모로 갖는지 검사

이렇게 동작할 경우 문제점은 실제로 ul > li a 조건에 부합하는 요소가 단 1개만 존재하더라도 브라우저는 모든 a 태그를 검색하여 조건을 따지는 연산을 반복한다. 그렇기 때문에 코드 작성 시 중첩 선택자 사용을 최대한 피해야 한다. 특히 SASS나 LESS와 같이 중첩 선택자를 간편하게 사용할 수 있는 경우, 나도 모르는 사이 중첩 선택자를 과도하게 작성하게 되니 조심하자.

💡 색상명 대신 hex코드 사용하기

color: red;, color: blue와 같이 색상명을 사용할 경우 브라우저마다 색상이 다를 수 있기 때문에 의도한 색상이 나타나지 않을 수 있다. 그렇기 때문에 색상명 보다는 hex 코드를 사용하여 모든 브라우저에서 동일한 스타일이 적용될 수 있도록 하자.