如何避免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-second-widget插入到my-first-widget中（但不是在my-first-widget .item内），my-second-widget中的项目将会是蓝色的（我希望它们能够继承父元素的颜色）。
2. 如果我将my-second-widget插入到定义为.item的项目中，my-second-widget中的项目将会是红色的 （我希望它们能够继承父元素的颜色，而不是无关联的通用.item类）。

怎样最好地为可导出的小部件设置样式？

解决方案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;}

使用解决方案2后，我仍然遇到了与通用的.item选择器冲突的问题...

还有其他的想法吗？

- PsychoJohn

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/

在.my-second-widget .item上设置color: inherit，这将强制嵌套的.item从.my-second-widget（如果已设置）或.project的颜色值（如果已设置）或最终的body（设置或默认值）中继承颜色值。

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

- Marc Audet

---

谢谢。你的代码有效，但我该怎么做才能防止其他规则在一般.item类中产生影响，比如边框、背景等？为所有这些规则编写inherit似乎不是一个好主意。 - PsychoJohn

我很抱歉，对于这个问题并没有什么万能的解决方法。您需要尽可能地使小部件CSS规则自包含，这意味着您需要指定每个对设计至关重要的属性，并确保明确设置float:none、position:static等属性。您不能假设任何外部第三方样式表中可能存在的内容。事实上，有些小部件甚至会使用内联样式来确保您无法破坏小部件布局（例如Constant Contact电子邮件注册）。 - Marc Audet

你认为开篇所描述的解决方案1怎么样？我认为这个方案结合你的（指明所有关键属性）用于类选择器，如“.my-widget a”，可能是一个不错的策略。 - PsychoJohn

当我思考这个问题时，问题的根源在于在多个样式表中定义了相同的类名。创建唯一的名称，例如.my-unique-tag-item，就可以解决问题。关键是要确保所有标签都有相应的CSS规则，选择器具有足够高的特异性，例如.my-unique-tag-container .my-unique-header a等等。 - Marc Audet