CSS 규칙 간의 충돌을 방지하는 방법

Question

HTML 위젯을위한 CSS 선택기를 만드는 가장 좋은 전략은 무엇입니까? 이러한 선택자는 하위 요소 나 가능한 일반 선택자와 충돌해서는 안됩니다. 나는 내-첫 위젯 안에 내 초 - 위젯 (하지만 내-첫 위젯 .item 이내), 항목을 삽입하는 경우

1. : 위의 코드와

   /* this item class it is already done, has no relation with my widgets´ items 
       and i can´t modify it*/   
       .item { color:red; }  
   
       .my-first-widget{...} 
       .my-first-widget .item { color: blue; font-size:16px;} 
   
       .my-second-widget{...} 
       .my-second-widget .item { font-size:14px;} 
   

   문제 제 2 위젯의 파란색은 파란색으로 표시됩니다 (부모로부터 색상을 물려 받기를 원합니다).

2. 규칙이 .item으로 정의 된 프로젝트 내에 my-second-widget을 삽입하면 my-second-widget의 항목이 빨간색으로 표시됩니다 (관련없는 일반 항목이 아닌 해당 항목의 부모로부터 색상을 상속 받기를 원합니다). 항목의 클래스).

내보낼 수있는 위젯의 스타일을 지정하는 가장 좋은 해결책은 무엇입니까?

해결 방법 1 (사용 상위 클래스 접두어)

.my-first-widget{...} 
    .my-first-widget-item { color: blue; font-size:16px;} 

    .my-second-widget{} 
    .my-second-widget-item { font-size:14px;} 

해결 방법 2 (이용 아동 선택기)를 solution2와

.my-first-widget{...} 
    .my-first-widget > .item { color: blue; font-size:16px;} 

    .my-second-widget{ color: black;} 
    .my-second-widget > .item { font-size:14px;} 

가 난 여전히 일반과 충돌이있다. 항목 선택기 ...

다른 아이디어?

Answer 1

다음과 같이 생각됩니다. 이것이 당신의 HTML 경우

: 상속 중첩 .item을 강제하는 .my-second-widget .item에 color: inherit 설정 http://jsfiddle.net/audetwebdesign/3eLpU/

:

.item { 
    color:red; 
} 
.my-first-widget { 
} 
.my-first-widget .item { 
    color: blue; 
    font-size:16px; 
} 
.my-second-widget { 
} 
.my-second-widget .item { 
    color: inherit; 
    font-size:14px; 
} 

.project { 
} 

참조 데모에서 :

<div class="project"> 
    <div class="item">item outside widget</div> 
    <div class="my-second-widget"><span class="item">item</span></div> 
</div> 

이 CSS를 시도 .my-second-widget의 색상 값 (설정되어있는 경우) 또는의 색상 값(설정되어있는 경우) 또는 궁극적으로 본문 (설정 또는 기본값).

최상위 레벨 .item 규칙이있는 경우 .my-second-widget 외부에 적용됩니다.