范围 CSS 重置

Question

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

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

现在显然我可以重置在此范围内使用的所有 HTML 元素，但它看起来不太优雅。其他人有什么办法处理这个问题吗？

Answer 1

经过一番谷歌搜索后，我发现了我之前偶然发现的这个项目。这是一个范围内的 CSS 重置，完全依赖于 !important 规则。 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-active
2. 创建一个默认样式表，该样式表将在时为正确的类提供正确的样式没有其他样式应用于该页面。
3. 对始终相同的 ui 动画使用内联样式（这里没有太多选择，如果是动画，内联样式会发生变化）。
4. 提供有关哪些类应用于哪些元素以及何时应用于哪些元素的良好文档。

这将允许更高级的开发人员使用他们自己的样式表，或者扩展样式表以形成所需的格式，如果开发人员做了像 div a {float:左；}。

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

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

作为可能受支持也可能不受支持的 HTML5 解决方案（尚不知道哪些浏览器支持此功能），您可以通过 style 元素，带有 scoped 属性（看图，范围样式）。它可能包含一个简化的 HTML 重置，但是当您想要覆盖某些内容并且必须陷入特殊性之争时，整个系统更有可能在以后限制您。