클래스/ID를 모든 것에 추가하거나 다른 선택자를 사용해야합니까?

Question

요소를 선택하는 가장 좋은 (가장 효율적인) 방법은 무엇인지 모르겠습니다.

내가 어떻게해야

<div id="navigation"> 
    <ul> 
    <li>Link 1</li> 
    <li>Link 2</li> 
    <li>Link 3</li> 
    </ul> 
</div> 

내 정렬되지 않은 목록을 선택합니다

1. (나는 내 ​​사이트를 통해 다른 UL의 영향을주지 않습니다 보장) (매우 간단한 예) 나는 다음과 같은 레이아웃을 가지고 말할 수 있습니다 #navigation ul {} 또는 UL에 수업을 지정 하시겠습니까?
2. 내 목록 항목을 선택하고 싶습니다. 다시 그 항목에만 영향을줍니다. navigation ul li{}을해야합니까, 아니면 수업을 배정해야합니까?
3. 마지막으로, 첫 번째 링크를 선택하고 스타일을 지정하려면 #navigation ul li:first-child {}을 수행해야합니까? 아니면 클래스를 할당해야합니까?

이 질문에 감사드립니다. 거의 같지만 클래스를 사용해야 할 때와 그렇지 않을 때가 궁금합니다.

Answer 1

여기에 어렵고 빠른 답변이 없습니다.

일반적인 경험 법칙 특정 요소를 함께 그룹화하고 동일하게 취급하고 수업을 사용하는 것이 클래스를 수행하는 유일한 방법 인 경우 클래스를 사용하는 것이 좋습니다.

예를 들어 마지막 예에서는 클래스가 필요하지 않습니다.

그러나 예제 3의 클래스를 사용하면 브라우저가 관련 항목을 더 빨리 찾을 수 있으므로 성능이 향상됩니다. 이것에 대한 트레이드 오프는 코드 가독성의 약간의 감소입니다. 모든 것에 클래스 이름이 있다면 나머지 마크 업을 읽기가 더 어려워집니다.

간단히 말해서 위에 표시된 내용에서 작성한 내용은 훌륭합니다.

this 기사를 읽어야하지만 셀렉터 효율성을 다루고 있습니다.

ID, e.g. #header 
Class, e.g. .promo 
Type, e.g. div 
Adjacent sibling, e.g. h2 + p 
Child, e.g. li > ul 
Descendant, e.g. ul a 
Universal, i.e. * 
Attribute, e.g. [type="text"] 
Pseudo-classes/-elements, e.g. a:hover 

클래스 이드의 성능 차이는 일반적으로 관계가 다음과 같이

기본적 효율의 순서이다.

목록 아래로 내려 가면 상황이 상당히 느려집니다.

이것은 클래스와 ID를 어디에서나 추가 할 수있는 인수가 아니며 성능과 유지 관리 간의 절충점을 판단 할 수 있습니다.

Answer 2

#id는 고유해야하며 클래스는 없어야합니다.

그래서 JS를 추가해야하는 경우 #id가 필요합니다. 다른 요소의 스타일을 지정하려는 경우 .class가 좋습니다.

Answer 3

#navigation 요소 아래의 구조가 얼마나 복잡한 지에 따라 달라질 것입니다. #navigation 요소를 사용하여 모든 것을 참조하는 것은 아마 당신이 보여준 것과 같은 간단한 구조라면 괜찮 겠지만 그것이 더 복잡하거나 다른 동작을 필요로 할 다른 요소가 필요한 li 요소가 있다면 id/class 중첩 집단.

Answer 4

자바 스크립트 사용의 경우 원시 클래스를 사용하는 것보다 빠르며 클래스 또는 ID가없는 것 같습니다.

자세한 내용은이 이론을 복잡한 코드로 테스트하는 것만 큼 (다른 시간 참조) 생각합니다.

브라우저에 따라 javaScript의 속도가 더 빨라지는 것을 잊지 마십시오.

CSS의 경우 자세한 내용은 here을 참조하십시오.