jquery插件开发中css应该放在哪？

Question

jquery插件开发中，肯定要定一些css样式，那么css样式是另外写一个样式文件引进来，还是直接在jquery插件里用$().css()直接写好？

Answer 1

您好，我建议单独定义外部样式表，引入外部样式表并操作class，但要注意类名的语义化和唯一性。这是为什么呢？

1. 行内样式的缺点其实很明显，CSS直接写在HTML代码的内容中间，这样并不能够形成样式和元素的分离，也无法进行批量操作，唯一的作用就是能够修改丰富的样式，但如果全部使用这种方式的话，会使HTML中有很多冗余的CSS代码，并且让你的代码看起来非常的臃肿。所以这种方式，一般是不会出现在正常的项目使用上的。

2. 使用外部样式表，相对于内部样式的，有以下优点：(1)、样式代码可以复用。一个外部CSS文件，可以被多个地方共用。(2)、便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改插件代码。(3)、提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。
   希望对您有帮助！如有其他问题可以找我。

Answer 2

使用单独的css文件比较好。尽量避免直接去改css样式。

Answer 3

写个插入css样式的方法，将样式作为json数据。这样css和js可以合并了。
我自己写的toast效果，只要页面引入这个js，调用Toast()方法就可以实现效果了。
新人求赞~

function Sheet(rulers){
    this.style = (function(){
        var style = document.createElement("style");
        document.getElementsByTagName("head")[0].appendChild(style);
        //style.appendChild(document.createTextNode(""));/* For Safari */
        return style;
    })();
    this.sheet = this.style.styleSheet || this.style.sheet;;
    if(rulers) this.addCSSRulers(rulers);
    return this;
}
Sheet.prototype.addCSSRulers = function(rulerJson){
    for(var k in rulerJson)
        this.addCSSRuler(k,rulerJson[k]);
    return this;
}
Sheet.prototype.addCSSRuler = function(selector,ruler){
    if(this.sheet.insertRule)
        this.sheet.insertRule(selector+" {"+ruler+"}",this.sheet.cssRules.length);
    else if("addRule" in this.sheet)
        this.sheet.addRule(selector,ruler,-1);
    return this;
}
Sheet.prototype.empty = function(){
    return this;
}
//创建Node节点
function NewObject(tag, attrs, txt) {
    var res = document.createElement(tag);
    if (attrs != null)
        for (var k in attrs) {
            if(k=="className"){
                res.className = attrs[k];
                continue;
            }
            if (typeof attrs[k] == "object" && k == "style") ;//$(res).css(attrs[k]);
            else res.setAttribute(k,attrs[k]);//$(res).attr(k, attrs[k]);
        };
    if (txt != null) {
        if(tag=="input" || tag=="select" || tag=="textarea")
            res.value = txt;
        else
        res.appendChild(document.createTextNode(txt));
    }
    return res;
}
window.onload = function(){
    //1.插入样式
    new Sheet({
        ".toast": "position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; flex-direction: column;",
        ".toast.hidden": "visibility: hidden;",
        ".toast.fadeout": "-webkit-animation: fadeout 3s ease;",
        ".toast > div": "border-radius: 5px; padding: 2rem; color: #fff; background-color: rgba(0,0,0,0.6);",
        "@-webkit-keyframes fadeout": "0%{ opacity: 0.2; } 50%{ opacity: 1; } 100%{ opacity: 0; }"
    });
    //2.插入HTML
    var odiv = NewObject("div",{"className": "toast hidden"});
    odiv.appendChild(NewObject("div"));
    document.body.appendChild(odiv);
    //3.绑定事件
    odiv.addEventListener('animationend', function(){
        this.className = this.className.replace(/\b(fadeout)\b/,"")+" hidden";
    });
    //提供接口API
    window.ShowToast = function(txt,fn){
        var oc = odiv.getElementsByTagName("div")[0];
        if(txt){
            oc.innerHTML = txt;
        }
        if(/\b(fadeout)\b/.test(odiv.className)==false) odiv.className = odiv.className.replace(/\bhidden\b/,"")+" fadeout";
        if(txt && fn) fn();
    }
}

Answer 4

看个人喜好?

Answer 5

明显单独的文件好维护啊

Answer 6

单独文件吧。就算不深究其原因，参考大多数库的做法，都是css和js分离的

Answer 7

看样式的多少，如果样式很多，用jquery操作不容易，那么最好放到单独文件，这样也方便只修改样式。