如何防止css规则之间的冲突

Question

为 html 小部件创建 css 选择器的最佳策略是什么。这些选择器不应与子元素或可能的通用选择器发生冲突。

/* 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. 如果我在 my-first-widget 中插入 my-second-widget（但不在 my-first-widget .item 中），则来自 my-second-widget 的项目将是蓝色的（我希望它们继承颜色）的父母）。
2. 我将 my-second-widget 插入到一个规则定义为 .item 的项目中，来自 my-second-widget 的项目将是红色的（我希望它们从它的父项继承颜色；而不是从不相关的一般项班级）。

哪个是样式化可导出小部件的最佳解决方案？

解决方案1（使用父类a前缀）

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

使用解决方案 2 我仍然与一般的 .item 选择器有冲突......

还有其他想法吗？

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：

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

请参阅演示： http: //jsfiddle.net/audetwebdesign/3eLpU/

设置color: inherit为.my-second-widget .item，这将强制嵌套.item继承来自.my-second-widget（如果已设置）的颜色值，或.project（如果已设置）或最终主体（设置或默认值）的颜色值。

如果存在顶级.item规则，它将应用于 之外.my-second-widget。