브라우저에서 선택자를 인식하는 방식
오른쪽에서 왼쪽으로 스캔하며 읽는다.
예를 들어,
<style>
div ul li span{
width: 200px;
}
</style>이 경우 문서 내 모든 span을 찾고 상위의 li > ul > div 순으로 찾게 된다. 그렇기 때문에 선택자를 너무 길게 작성하거나 선택자를 확인하는 것에 오랜 시간이 걸리므로 웹페이지 성능이 저하되게 된다.
효율적인 CSS 작성법
- 선택자는 3개 이상 작성되지 않게 한다.
- 전체 선택자를 사용하지 않는다. (특히 마지막에 사용하지 않는다.)
- attr 선택자 사용을 지양한다. (모든 attr을 스캔해야하기 때문)
- 아이디 선택자를 사용을 줄인다. (아이디 선택자는 단 하나의 html요소에만 사용가능하기 때문에 CSS파일 용량을 크게 만든다. 대신 class를 사용)
- 클래스 규칙에 불필요한 태그를 조합하여 사용하지 않는다.
- 태그 선택자 규칙에 상위 선택자로 태그를 포함하지 않는다. (HTML 문서 수정에 따른 CSS 파일 수정을 최소화하기 위해서)
