范围内的 CSS 重置答案

【问题标题】：Scoped CSS reset范围内的 CSS 重置
【发布时间】：2011-07-16 20:42:23
【问题描述】：

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

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

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

【问题讨论】：

为什么用户能够定义自己的样式是一件坏事？
这不是一件坏事，但对于插件我想避免它意外发生。例如，如果他们做了类似 'div a { float:left; }' 这可能会破坏插件的外观/布局。此外，该插件是一个管理工具，因此无论其位于哪个站点，它都应该看起来不同并且以某种方式运行。无论如何，如果他们真的想更改插件，我不会停止它，我只是想防止像我上面描述的那样的情况，这些情况不是针对更改插件的布局，而是针对更广泛的站点。
任何使用div a{ float:left; } 的人都会遇到更多问题，因为您的插件看起来不太正确。

标签： jquery css jquery-plugins css-reset plugin-architecture

【解决方案1】：

经过一番谷歌搜索后，我发现了我之前偶然发现的这个项目。这是一个完全依赖于 !important 规则的范围 CSS 重置。 https://github.com/premasagar/cleanslate

【讨论】：

【解决方案2】：

您可以通过插件将所有样式内联到您注入到 DOM 的 HTML 中。这仍然不能保证，因为用户也可以根据需要使用自己的 JS 覆盖它。

如果为了方便起见，您可以将所有 HTML 包装在一个 ID 中，然后重置其中的所有内容：

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

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

【讨论】：

我已经有了这个，但我希望有更好的解决方案。我在想可能是在显示插件之前动态生成和应用的某种重置....
我认为这正是他试图避免的事情。
那么我很困惑。如果你想要一个 CSS 重置，那么这就是你需要做的。您需要手动重置样式。要确定它的范围，您必须在其前面加上父容器的 ID。

【解决方案3】：

没有真正的 CSS 重置。 CSS 样式规则将级联到它适用的任何元素，而阻止这种情况的唯一方法是用另一个规则覆盖它。

重置样式表的工作原理是覆盖默认在浏览器中应用的重要规则。如果你想在一个范围内做类似的事情，它不会被限制在浏览器默认设置的范围内，你必须覆盖所有可能在页面样式表中设置的样式。即使这样，您也不能制定如此具体的规则，以至于它们会否决所有可能的选择器。

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

【讨论】：

我认为作为绝对最后手段的唯一另一件事是将呈现的 HTML 放入 iframe 中。但我想不惜一切代价避免这种情况。

【解决方案4】：

我建议结合几件事情：

使用大量命名空间/前缀类，即plugin-checked plugin-active
创建一个默认样式表，当没有其他样式应用于页面时，该样式表将为正确的类提供正确的样式。
对始终相同的 ui 动画使用内联样式（在此选择不多，如果是动画，内联样式会发生变化）。
提供关于哪些类应用于哪些元素以及何时应用的良好文档。

这将允许更高级的开发人员使用他们自己的样式表，或扩展您的样式表以制作所需的格式，如果他们做了类似div a {float:left;} 这样愚蠢的事情，它还将为开发人员提供覆盖其默认样式的钩子。

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

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

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

【讨论】：