CSS样式冲突预防和命名空间技术

Question

假设您正在构建一个名为Awesome Widget的概念窗口小部件,并且您希望完全保护它不会与作为窗口小部件内容作为内容的周围元素或子元素冲突.

我们不想要的

div ul li {}

解决方案1:CSS子组合器

使用CSS子组合子选择器指定只应针对直接子项.

.awesomewidget > div > ul > li {}

解决方案2:类命名空间

使用aw(Awesome Widget)作为每个类的命名空间,使用精确的命名空间+ classname减少页面上任何其他元素的可能性.

.awesomewidget .aw-container .aw-list .aw-listitem {}

在CSS中也有类似@namespace的东西,但这只适用于XML.

除了解决方案1和2,还有其他可以使用的解决方案吗？你更喜欢哪一个？任何最佳做法？

编辑:没有适当的命名空间/样式冲突预防而出现的问题示例

小部件样式:

.awesomewidget > div ul li {
background-color:red;
}

用户造型:

ul li {
background-color:blue;
}

标记:

<div class="awesomewidget">
<div>

<ul>
<li>
<!-- user content starts here -->

<p>I am the user and I want to add some content here. Let's add a list:</p>

<ul>
<li>Why is this list-item red and not blue?</li>
</ul>

<!-- user content ends here -->
</li>
<li>
<!-- user content starts here -->

<!-- user content ends here -->
</li>
</ul>

</div>
</div>

Answer 1

我更愿意结合使用两种解决方案，例如：

.awesomewidget > div ul li {}

因为第二个给标记增加了很多不必要的权重。

更新

对于您的示例，我将使用 class 添加一个围绕用户内容的包装器.user，然后在其 CSS 前面添加.user. 然而，这并不优雅，它增加了一些标记，而且我认为它很容易失败。