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

Question

假设您正在构建一个名为 Awesome Widget 的概念性小部件，并且您希望完全保护它不与周围元素或作为内容驻留在小部件内的子元素发生冲突。

我们不想要的

div ul li {}

解决方案 1:CSS 子组合器

使用 CSS 子组合器选择器指定只应定位直接子级。

.awesomewidget > div > ul > li {}

方案二:类命名空间

使用 aw(Awesome Widget)作为每个类的命名空间，减少页面上任何其他元素使用该确切命名空间 + 类名的机会。

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

CSS 中也有类似@namespace 的东西，但那只适用于 XML。

除了方案一和方案二，还有其他的可以使用吗？你更喜欢哪一个？有什么最佳做法吗？

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

小部件样式:

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

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

更新

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