CSS에서 선택기의 속도/중복성 [폐쇄

Question

CSS에서 브라우저 선택기 속도에 대한 정보가 있습니까? 다시 말해, 다른 선택기가 서로 비교하는 방법 (동일한 브라우저에서).

예를 들어, 나는 종종 다음과 같은 코드를 봅니다.

#content #elem { ...rules... }

그러나 그 요소는 고유 한 ID이므로 #elem, 오른쪽? 이로 인해 브라우저가 더 복잡한 선택기를 갖는 것이 더 빠르는지 생각하게되었습니다. 브라우저가 찾을 수 있다는 내 생각은 #content 그리고 그 요소만을 보는 것을 알고 있습니다.

또 다른 예일 수도 있습니다 table tr td .class vs table .class

Answer 1

솔직히 말해서, 당신은 그것이 실제로 차이를 만든다고 생각하지 않는 작은 시간을 말하고 있습니다.

보다 구체적인 선택기를 사용하는 측면에서 - 이것은 몇 가지 이유로 좋은 관행이라고 생각합니다.

1. 코드 가독성을 향상시킵니다. 한눈에 HTML에 비해 선택기가 적용되는 곳을 더 많이 볼 수 있습니다.
2. 더 많은 특이성을 가진 선택기가 기록 될 가능성이 거의 없기 때문에 선택기가 다른 곳에서 덮어 쓰일 가능성을 줄입니다.

당신이 말하는 것 5월 jQuery와 같은 JavaScript 라이브러리를 사용할 때 차이를 만듭니다. 전체 문서를 직접 구문 분석해야하지만 속도 차이가 직접적으로는 눈치 채지 못했습니다.

Answer 2

여기 빠른 검색 후 얻은 정보입니다.

Answer 3

속도에는 차이가있을 수 있지만 정상적인 사용 사례에서는 인식 할 수 없습니다. CSS와 같은 진짜 이유는 특이성입니다. 그것은 당신이 가지고 있다면입니다

#content #elem {color: black;} 

그리고

#elem {color: red;}

요소는 더 구체적인 규칙이므로 요소를 검은 색으로 채색해야합니다.

Answer 4

현명한 사람이 아니라, 그 질문을 작성하는 데 걸리는 시간은 아마도 사이트를 방문 할 모든 사용자 (#ID #id2 vs #id2와 관련하여)의 모든 시간을 절약 할 수 있습니다. 이 답을 쓸 시간도 마찬가지입니다 ....

당신은 지금 저에게 투표 할 수 있습니다 :)

Answer 5

모질라의 지침 흥미로울 수 있습니다.

Answer 6

1. 효율성과 가독성 사이에는 항상 어떤 선택이 있습니다. 물론 table tr td .class 가장 읽기 쉽지만 비효율적이며 단순화 할 수 있습니다. 어디에서나 보았습니까 (유효한 마크 업을 가정) tr 없이 table 또는 td 없이 tr? 적어도 다음과 같은 중복 부분을 주석 할 수 있습니다.

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. 때로는 다른 사람들이 언급했듯이 추가 특이성이 필요합니다. #elem 특정 맥락에서의 경우를 제외하고 어디에서나 빨간색이어야합니다. #content.

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }