widget CSS与站点CSS冲突

我为我的网站构建了一个小部件，我在加载时动态添加CSS，但问题与主机网站CSS文件冲突。 以下代码适用于我的小部件，它在加载时附加了CSS文件：

function main() { jQuery(document).ready(function($) { /******* Load CSS *******/ var css_link = $("", { rel: "stylesheet", type: "text/css", href: "http://example.com/widget/green.css" }); css_link.appendTo('head'); var txt; txt='
'; txt=txt+'
'; txt=txt+'
Hepsi
'; txt=txt+'
Canlı
'; txt=txt+'
Bitmiş
'; txt=txt+'
Başlamamış
'; txt=txt+'
Ertelenen
'; txt=txt+'
Oyunlarım (0)
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
get_All_Today_Matches();
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; txt=txt+'
'; $('#widget-container').html(txt); }); } 

我想知道有没有办法隔离我的小部件的CSS？

顺便说一下，从匿名函数调用main函数（用于隔离目的）

PS：我使用css重置，但它仍然是同样的问题。

Answer 1

您可以命名所有CSS。 这将避免您遇到常见CSS类名称（如container或wrapper ，例如：

 .my-amazing-widget--tab-container { height: 100px; } 

如果您的所有CSS都是如上所述的命名空间，那么网站很可能不会在其CSS中包含您的小部件名称。

我会避免像其他用户在他们的评论中所建议的那样使用!important这样的声明 – 如果你覆盖一个普通的类，你的样式最终可能会对网站的样式产生负面影响。

我还会避免任何全局声明，例如将CSS重置导入到窗口小部件中。 CSS重置覆盖诸如body，div等元素，这会对主机网站的CSS产生负面影响。

您需要更新所有相关的HTML才能使用命名空间。 CSS命名空间是解决此类问题的最佳方法，也是开发嵌入其他网站和应用程序的小部件时的最佳实践。