CSS样式冲突预防和命名空间技术 [英] CSS styling conflict prevention and namespacing techniques

问题描述

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

我们不想要的东西

  div ul li {} 
  

解决方案1：CSS子合并器

<

  .awesomewidget>使用CSS子组合选择器来指定只有直接的子元素才是有针对性的。 div> ul> li {} 
  

解决方案2：class namespacing

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

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

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

除了解决方案1和2，还有其他的可以用过的？你更喜欢哪一个？任何最佳实践？

编辑：没有适当的命名空间/造型冲突预防的问题的例子

Widget造型：

  .awesomewidget> div ul li {
 background-color：red; 
 
 $ / code> 

用户样式：


  ul li {
 background-color：blue; 
} 
  

标记：



 < div class =awesomewidget> 
< div> 
 
< ul> 
< li> 
 <！ - 用户内容从这里开始 - > 
 
< p>我是用户，我想在此添加一些内容。我们添加一个列表：< / p> 
 
< ul> 
< li>为什么此清单项目是红色而不是蓝色？< / li> 
< / ul> 
 
 <！ - 用户内容在此处结束 - > 
< / li> 
< li> 
 <！ - 用户内容从这里开始 - > 
 
 <！ - 用户内容在此处结束 - > 
< / li> 
< / ul> 
 
< / div> 
< / div> 
  




解决方案

我宁愿使用两种解决方案的组合例如：



  .awesomewidget> div ul li {} 
  

因为第二个增加了很多不必要的权重给标记。对于你的例子，我会用类添加一个用户内容的包装， .user ，然后用 .user 预先安装它们的CSS。然而，这不是优雅的，它增加了一些标记，我认为它很容易失败。

Say you're building a conceptual widget named Awesome Widget and you want to completely protect it from conflicting with either surrounding elements or child elements that reside as content inside the widget.

What we don't want

div ul li {}

Solution 1: CSS child combinator

Using the CSS child combinator selector to specify that only direct children should be targeted.

.awesomewidget > div > ul > li {}

Solution 2: class namespacing

Using aw (Awesome Widget) as the namespace for each class, decreasing the chance of any other elements on the page using that exact namespace + classname.

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

There's also something like @namespace in CSS but that's only for XML.

Besides solution 1 and 2, are there any others that can be used? Which one would you prefer? Any best practises?

EDIT: example of a problem that arises without proper namespacing / styling conflict prevention

Widget styling:

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

User styling:

ul li {
background-color:blue;
}

Markup:

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

解决方案

I would prefer to use a combination of the two solutions like:

.awesomewidget > div ul li {}

Because the second one adds a LOT of unecessary weight to the markup.

Update

For your example, I would add a wrapper around the user content with class .user and then prepend their CSS with .user. However, this is not graceful, it adds some markup, and I think it would be prone to failure.

这篇关于CSS样式冲突预防和命名空间技术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！