Как предотвратить конфликты между правилами css

Question

Что представляет собой лучшая стратегия для создания селекторов CSS для виджетов html. Эти селекторы не должны вступать в конфликт с дочерними элементами или с возможными общими селекторами.

/* 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;} 

Проблема с кодом выше:

1. Если я вставляю-второй-виджет внутри моего первого-виджета (но не в моем первом-виджете .item), элементы из my-second-widget будет синим (я хочу, чтобы они наследовали цвет от его родителя).
2. Я вставляю my-second-widget внутри проекта с правилом, определенным как .item, элементы из 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 (использование дочерних селекторов)

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

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

С solution2 я до сих пор конфликт с генералом. пункт ...

Любые другие идеи?

Answer 1

Я думаю, что для вас может работать следующее.

Если это ваш HTML:

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

попробовать этот CSS:

.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 { 
} 

См демо на: http://jsfiddle.net/audetwebdesign/3eLpU/

Набор color: inherit на .my-second-widget .item, который заставит вложенную .item наследовать значение цвета от .my-second-widget (если оно установлено) или значение цвета .project (если он установлен) или, в конечном счете, тело (заданное значение или значение по умолчанию).

Если присутствует верхний уровень .item правило, оно будет применяться за пределами .my-second-widget.