브라우저는 선택자를 오른쪽(선택자)에서부터 왼쪽으로 일치시킵니다.
브라우저는 선택자에 따라 DOM(웹페이지 인터페이스)의 요소를 필터링하고 부모요소를 검사하여 일치를 판정합니다.
선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 일치하는지 여부를 더 빠르게 판단할 수 있습니다.
예를 들어,
``` p span ```
이 선택자 p span는 먼저 모든 span요소를 찾아 그 부모의 루트까지 모두 통과하여 p요소를 찾습니다.
특정한 span의 경우 p를 찾는 즉시 span이 일치하는 것을 알고있으며, 이에 따라 매칭을 중지합니다.
하지만 무엇보다
선택자의 오류를 발생시키지 않기 위해서는 효율적으로 CSS를 작성하는 것이 좋습니다.
먼저, 브라우저는 선택자가 맨 오른쪽(key 선택자)부터 왼쪽으로 일치하는지 확인합니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 해당 부모요소가 일치하는지 식별합니다. 선택자 체인의 길이가 짧을수록 브라우저는 해당 요소가 선택자와 일치하는지 여부를 빠르게 판별할 수 있습니다. 따라서 태그 선택자와 보편적인 선택자 사용을 피해야 합니다. 이들은 많은 요소가 매치되기 때문에 부모가 일치하는지 여부를 판단하기 위해 브라우저가 많은 작업을 해야하기 때문입니다.
BEM (Block Element Modifier) 방법론에서는 모두 단일 클래스를 갖고, 계층구조가 필요한 곳에서는 클래스의 이름을 확장하기를 권장합니다. 따라서 선택자를 쉽고 효율적으로 재정의할 수 있습니다.
어떤 CSS 속성이 reflow, repaint, compositing을 트리거 하는지 알아두세요. 가능하면 레이아웃(reflow 트리거)를 변경하는 스타일은 피하세요.
성장노트