11

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

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

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

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

4

4 回答 4

13

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

https://github.com/premasagar/cleanslate

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

于 2009-12-20T21:52:14.393 回答
1

使用命名空间 & 重置 & LESS

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

  ... your other styles ...
}
于 2012-07-11T22:26:43.313 回答
1

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

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

#widget tagname{}

利用

html body #widget tagname{}

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

于 2009-10-09T11:59:46.637 回答
0

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

于 2009-10-09T11:52:59.833 回答