중첩 된 선택기 성능에 미치는 영향과 덜

Question

나는 이것에 대해 지난 1.5 시간 동안 읽었으며 여전히 간결함을 발견하지 못했으며 결정적 인 답을 찾을 수 없었습니다.

브라우저가 CSS 선택기를 오른쪽에서 왼쪽으로 구문 분석한다는 전제하에. 이와 같은 긴 CSS 선택기를 의미

:

.card .container .businesscard .pinfo li.pinfo-box span:first-child 

코드의 가장 효율적인 라인 중 하나입니다에 지금까지 SO 여기에 나타납니다.

우선이 글에 올까요?

두 번째로 LESS를 사용하여 풍부한 UI를 디자인하고 있습니다.이 UI는 코딩하는 중첩 된 디자인에서 이러한 종류의 거대한 선택기를 궁극적으로 생성합니다.

이러한 종류의 선택기를 피하기 위해 수행 할 수있는 작업은 무엇입니까? 클래스와 ID에만 의존합니까? 그러나 중첩 된 CSS를 작성할 수 없다면 LESS를 사용하는 목적은 무엇입니까?

귀하의 의견을 환영합니다.

Answer 1

맞습니다. 브라우저는 선택기를 오른쪽에서 왼쪽으로 평가합니다. li.pinfo-box 안에 span 등을 찾으려고합니다.

덜 쓰는 중 어림짐작은 다음과 같습니다. 3-4 단계 이상 중첩하지 마십시오.

이렇게하면 선택자가 크게 커지는 것을 막을 수 있습니다. 그래도 선택하지 않으면 중첩 기능을 계속 사용할 수 있습니다.

"쓸모없는"중첩의 좋은 예는 스타일 목록입니다.

#wrapper .blog-post ul, #wrapper .blog-post ul li

이는 li이ul 안에 있어야하도록 지정할 정말 필요한가 : 때때로이 같은 선택기를 쓰기?

#wrapper .blog-post li

이 모든 알고하는 것이 좋다 : 아마 충분히 기록 될 것입니다. 하지만 이것은 사이트 실적을 최적화하려고 할 때 가장 먼저해야 할 일이 아닙니다. 시간이 좀 걸리면 요청 횟수가 줄어 듭니다.

Answer 2

아주 특별한 콘텐츠가없는 한 선택기 구문 분석 및 검색은 큰 요인이되지 않을 수 있습니다. 테스트가 성능 문제를 보여줄 때까지 유지 보수가 가능하고 작업이 완료되도록 제안 할 것입니다. 그런 다음 프로파일 러를 꺼내게 될 것입니다 (OSX에서는 Instruments를 사용하지만 대부분의 플랫폼에서 사용 가능해야합니다). 선택기 일치가 프로파일에서 높게 나타난다면, 느린 선택자를 빠른 선택자로 교체하십시오 (ID 선택자는 확실히 좋은 선택입니다).