CSS 선택기 전략 : (상위 클래스를 사용하는 접두어 : .widget .widget-item {}) 또는 (직접 : .widget-item {})

Question

매우 일반적인 상황이 있습니다.

옵션 1 :

이

<div class="widget"> 
    <div class="widget-item"></div> 
</div> 

우리는 .widget-item 2 옵션을 스타일 수 : 이제 우리는 약간의 마크 업 있다고 가정 해 봅시다 직접 액세스 : 접두사는 부모 클래스

.widget .widget-item { /* styles */ } 

옵션 2를 사용하여 클래스

.widget-item { /* styles */ } 

---

접두사에 중요한 성능 이점/히트가 있습니까?

다른 컨테이너에서 클래스를 다시 사용할 필요가 없다면, 예를 들어 .other .widget-item과 같이 접두사에 어떤 실질적인 이점이 있습니까? (대개의 경우 부모 이외의 클래스를 재사용 할 필요가 없으므로 기능적으로 차이가 없습니까?)

어쩌면 내가하지 말아야 할 때 이러한 깊은 셀렉터를 사용하고 있습니까? 중첩되지, http://coryschires.com/why-you-should-deeply-nest-your-css-selectors/

이 사람은 당신이 간단한을 유지해야한다고 말했습니다 :

이 사람은 당신이 깊게 둥지해야 말한다 https://github.com/csswizardry/CSS-Guidelines#selectors

이 중복 인 경우, 용서를 찾을 수가 없습니다.

Answer 1

체크 아웃이 post on Decoupling HTML from CSS. 내가 할 수있는 한 자주 딥 체인을 피하십시오. 왜냐하면 그것은 당신의 스타일이 정말로 부서지기 때문입니다.유지 관리 측면에서 간단한 .widget 클래스 선택기는 수정하고 변경하기가 더 쉽습니다.

성능면에서는 @Toni Michel Caubet이 옳다고 생각합니다. 짧은 셀렉터 체인은 브라우저에 대한 작업이 적습니다.

Answer 2

중첩 된 선택기와 간단한 선택기를 만드는 결정은 실제로 특정 규칙을 재정의해야 할 가능성에 따라 결정되어야합니다.

특이성 및 모양 순서에 따라 서로 스타일이 연계됩니다. 성능에 영향이 있지만 가장 일반적인 시나리오에는 지나치게 관심이 없습니다.

.widget .widget-item과 같은 선택기를 사용하면 .widget-item과 같은보다 높은 특이성을 갖게됩니다. 따라서 일부 기본 스타일을 덮어 쓸 수있는 곳에서 .widget-item을 사용하는 시나리오가있는 경우 대신 .widget .widget-item과 같은 것을 추가 할 수 있습니다. 비슷하게 div.widget-item과 같은 약간 특이성이있는 무언가를 수행하면 .widget-item에 orginially 일치하는 잠재적 규칙을 무시합니다.

기본적으로 이것은 !important을 온통 두는 공통적 인 실수에 의하지 않고 규칙 충돌을 처리해야하는 방식이므로 동일한 특수성을 갖거나 더 이상 제어 할 수없는 중요한 규칙이 충돌합니다. 일치하려는 규칙에 충분하지 않습니다.

다음은 해당 주제에 대한 기사입니다.

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/