Scoped CSS重置

Question

我有一个jQuery插件，可以动态地为页面呈现大量的HTML。我希望插件的使用者能够按原样使用它，并且无论它们具有什么样的CSS样式，它都看起来都一样。

因此我需要一个“范围”的CSS重置 - 即在我的插件div中说出任何内容的能力不应该受到所有者CSS的影响。

现在很明显我可以重置我在这个范围内使用的所有HTML元素，但它看起来并不优雅。其他任何人都会采取任何方式来处理这个问题吗？

Answer 1

经过一段时间的谷歌搜索，我发现这个项目是我之前偶然发现的。这是一个范围内的CSS重置，完全依赖于！重要规则。 https://github.com/premasagar/cleanslate

Answer 2

您可以通过插件将所有样式内嵌到您注入DOM的HTML中。这仍然无法保证，因为如果用户也愿意用自己的JS来覆盖它。

如果为方便起见，那么您可以将所有HTML包装在ID中，然后重置所有内容：

#myPluginHTML p, #myPluginHTML li, #myPluginHTML div, etc {
   margin: 0px;
   etc: 0;
}

同样，不保证任何事情。但是应该默认工作。

Answer 3

没有真正的CSS重置。 CSS样式规则将级联到它应用的任何元素，并且阻止它的唯一方法是用另一个规则覆盖它。

重置样式表的工作原理是覆盖默认情况下在浏览器中应用的重要规则。如果你想在范围内做类似的事情，它不会受限于浏览器默认设置的内容，你必须覆盖可能在页面样式表中设置的每种可能的样式。即便如此，你也不能制定那些特定的规则，以至于它们会否决所有可能的选择器。

所以，你所要求的是不可能的。但是，您可以通过覆盖范围的最常见和最重要的样式来做出合理的妥协。

Answer 4

我建议将一些事情结合起来：

1. 使用大量名称空间/前缀类，即plugin-checked plugin-active
2. 创建一个默认样式表，当没有其他样式应用于页面时，该样式表将为正确的类提供正确的样式。
3. 对于总是相同的ui动画使用内联样式（在这里没有很多选择，如果它是动画，内联样式可以改变）。
4. 提供关于哪些类应用于哪些元素以及何时使用的良好文档。

这将允许更高级的开发人员使用他们自己的样式表，或者在样式表上展开以制作所需的格式，如果他们做了像div a {float:left;}那样愚蠢的事情，它也会让开发人员勾选他们的默认样式。

您可以在默认样式表中非常具体，为每个元素指定每个规则，但这往往是完全没有必要的，因为它比它的价值更麻烦。

避免制作限制开发的插件，而是尝试制作一个简化开发的插件。

作为可能支持或不支持的HTML5解决方案（不知道哪些浏览器支持此功能），您可以通过style element with the scoped attribute将一组样式添加到容器中（如图，范围样式）。它可能包含一个简化的HTML重置，但是当你想要覆盖某些内容并且必须进行特异性争夺时，整个系统更有可能限制你。