小部件CSS与网站CSS冲突 [英] widget CSS conflicts with site CSS

问题描述

我为我的网站构建了一个小部件，并在加载时动态添加了CSS，但是问题与主机网站CSS文件冲突. 以下代码适用于我的窗口小部件，该窗口小部件在加载时附加了CSS文件:

I build a widget for my website and I add CSS dynamically on loading but the problem is conflicting with the host website CSS file . The following code is for my widget which has CSS file attached on loading :

function main() {
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://example.com/widget/green.css"
        });
        css_link.appendTo('head');
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Canlı</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Başlamamış</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
} 

我想知道有什么方法可以隔离小部件的CSS吗?

I want to know is there any way to isolate my widget's css ??

通过匿名函数调用主函数的方式(出于隔离目的)

by the way the main function is called from anonymous function (for isolation purpose)

PS:我使用了CSS重置，但是仍然是同样的问题.

PS: I used css reset but it still the same problem .

推荐答案

您可以为所有CSS命名空间.这将避免您遇到常见的CSS类名称(例如container或wrapper)的问题，例如:

You can namespace all of your CSS. This will avoid you having issues with common CSS class names like container or wrapper, for example:

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

如果您所有的CSS都像上面那样命名，那么该网站不太可能在您的CSS中使用您的小部件名称.

If all of your CSS is namespaced like above, it is not very likely that the website will have your widget name in their CSS.

我会避免像其他用户在注释中建议的那样使用诸如!important之类的声明-如果覆盖一个通用类，则样式最终可能会对网站的样式产生负面影响.

I would avoid using declarations like !important as another user suggested in their comments—it is possible that if you override a common class that your styles would end up negatively affecting the website's styles.

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

I would also avoid any global declarations like importing a CSS reset into your widget. CSS resets override elements like body, div, etc. which can negatively affect the host website's CSS.

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

You will need to update all related HTML to use the namespace. CSS namespacing is the best approach to a problem like this and is the best practice when developing widgets that are to be embedded in other websites and applications.

这篇关于小部件CSS与网站CSS冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！