仅适用于 #widget 的 CSS 重置答案

【问题标题】：CSS reset that applies only to #widget仅适用于 #widget 的 CSS 重置
【发布时间】：2010-12-05 07:48:50
【问题描述】：

假设我有一个使用复杂 CSS 的小部件，并且必须嵌入到多个网站中，这些网站都有自己的 CSS。

如果我在所有小部件的 CSS 规则前加上“#widget”，它们将不适用于外部的任何内容，因此解决了一个问题。不幸的是，网站的 CSS 规则仍然会弄乱小部件。

如果我使用适当的重置规则重置#widget 内的所有 CSS，那么希望它们会覆盖所有外部规则，对吗？（因为我的规则使用#id 而外部规则不知道我的小部件内的任何 id，它们不能覆盖它们，对吧？！尽管很重要）

将所有 CSS 重置为已知状态的最佳方法是什么？大多数 CSS 重置从浏览器默认值开始，它们不会重置任意 CSS。是否有任何 CSS 重置无论如何都有效？

【问题讨论】：

标签： css reset

【解决方案1】：

我使用 Eric Meyer 的 reset reloaded 来重置 CSS 样式。关联： http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

【讨论】：

【解决方案2】：

是的，您的 css 应该覆盖在小部件外部声明的任何内容，但您的重置必须非常全面。我建议使用 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 的修改版本，但您必须自己修改所有选择器。

我也很想加强你的选择器，而不是

#widget tagname{}

使用

html body #widget tagname{}

您的选择器现在将拥有更高的权重。

【讨论】：

我认为小部件可以放置在任何页面上，因此您需要重置的 CSS 是未知的。为了完全安全，他需要在全局重置规则（例如 Eric Meyer 的规则）前加上#widget。
我完全同意（我也链接到它）
Eric 的重置似乎只是重置浏览器默认值，而不是所有可能被 CSS 化的东西，所以它们可能还不够。

【解决方案3】：

我在尝试解决同样的问题时遇到了 cleanslate.css：

我还没有在生产中使用它，但它显然来自 BBC World Service 小部件的开发。

【讨论】：

注意 - CleanSlate 项目已从 Google 代码转移到 GitHub：github.com/premasagar/cleanslate（我创建了项目 - 是的，它解决了这个问题；）

【解决方案4】：

使用命名空间 & 重置 & LESS

#my-ns {
  @import ".../reset.less";

  ... your other styles ...
}

【讨论】：