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

如何解决CSS样式冲突预防和命名间隔技术

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

div ul li {}

解决方案1：CSS子组合器 使用CSS子组合器选择器来指定仅定向直接子级。

.awesomewidget > div > ul > li {}

解决方案2：类命名空间 使用aw（超赞控件）作为每个类的名称空间，从而减少使用该确切名称空间+类名的页面上任何其他元素的机会。

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

    

解决方法

我希望将两种解决方案结合使用，例如：

.awesomewidget > div ul li {}

因为第二个添加了很多不必要的标记。 更新资料 对于您的示例，我将在类“ 7”的用户内容周围添加包装，然后在其CSS之前添加“ 7”。但是，这不是很优雅，它增加了一些标记，我认为这很容易失败。     ,如果XBL能够在浏览器中实现，它可能会有所帮助，因为它具有设计小部件的方式，可以避免传递样式信息。 顺便说一句，包括子组合器的另一个优点是性能。无需检查所有可能的子级来确定如何渲染。 但是，为了简洁起见，如果您要进行类名间隔，那么我认为最多两个就足够了，除非您的命名不够明确：

.awesomewidget .aw-listitem {}

您还可以在可能的最高级别为非用户内容部分提供一个容器（具有良好的命名空间类），该容器不会封闭用户内容，从而避免了这种风险。

<div/>

非常适合用于这种随意分组并为此目的而制作...     ,如果您遇到许多CSS名称空间冲突，也许是时候考虑切换到Facebook的ReactJS之类的前端JS框架了。这与Webpack Module Loader结合使用，将使您能够利用许多优秀的JS库来简化开发工作流程。以CSS-loader为例，它将通过您进行本地作用域确定来帮助您管理CSS开发。     ,以下是一些解决方案： 检查源顺序以确保全局样式已链接到头部中页面特定样式之前 使用目标触发用户CSS 使用生成的内容绑定样式 使用属性选择器提高特异性