针对大量主题的可维护CSS

Question

我必须为Web应用程序实现主题，用户可以在运行中切换。 设计师需要大约20种不同的字体颜色和背景颜色。 有没有办法在不创建20个不同的.css文件的情况下执行此操作？ 这将成为可维护性的噩梦。

我认为可能必须使用JavaScript。 我目前正计划将.css文件作为标记附加到DOM，然后在用户更改主题时对颜色代码进行一些字符串替换。 我希望找到一个更好的解决方案，因为这似乎是一个非常糟糕的黑客。

Answer 1

使用SASS，您可以在CSS中使用变量，您只需要在1个文件中进行更改，并使用更新的变量进行编译，您应该尝试使用它。

干杯

Answer 2

从广义上讲，我知道在使用一个css源（可能需要或不需要多个文件）时，有两种方法可以改变站点的样式。

1. 定义许多类.blueBorder ， .redBorder等并使用JavaScript，根据需要在元素上添加和删除类。
2. 或者定义类并再次使用JavaScript，更改这些类的定义。

可以使用两种方法的混合，但我不确定为什么要这样做。

这是使用第二种方法的JSFIDDLE 。

由于其选择器的强大功能，我决定使用纯JavaScript解决方案，而不是使用jQuery，这会使编码更简单（我猜）。 然而，我没有写的肉。 Patrick Hunlock的函数getCSSRule可以在这里找到。 该功能的每一行都有注释。 但是，由于包装问题，我删除了Fiddle中的注释。

该函数返回一个CSS规则的指针，然后可以很容易地操作。 例如：

    // get a class rule (in production code check return value for valid result)
    var r = getCSSRule('.primaryColor');
    // change its definition
    r.style.backgroundColor = "#f00";

具有分配给它们的类primaryColor所有元素将在上面的2行执行时将其背景颜色更改为红色（＃f00）。 没有其他要求。

注意样式表中节点的名称与CSS规则（ backgroundColor与background-color ）不完全相同。 我知道很多人不喜欢w3Schools.com网站，但在寻找样式对象参考时，我就找到了这个。 你可以在这里找到它

以下是代码：

启动CSS样式：

    <style type="text/css">

        #box1 {width: 50%; height: 200px; margin: 40px auto;  padding-top: 20px;}
        #box2 {width: 50%; height: 120px; margin: 20px auto 20px; padding: 10px;}
        .primaryColor {background-color: #f00;}
        .primaryBorder {border: 10px solid #000;}
        .secondaryColor {background-color: #ff0;}
        .secondaryBorder {border: 5px solid #fff;}
        .t {color: #f00;}
    </style>

HTML：

<div id="box1" class="primaryColor primaryBorder">
    <div id="box2" class="secondaryColor secondaryBorder"><p class="t">Theme Demonstration</p>
    </div>
</div>

<form style="margin: 40px auto; width:50%">
    <div role="radio" style="text-align:center" aria-checked="false">
    <input type="radio" name="theme" CHECKED value="theme1" onClick="setThemeOne()" >Theme 1
    <input type="radio" name="theme" value="theme2" onClick="setThemeTwo()" >Theme 2
    <input type="radio" name="theme" value="theme3" onClick="setThemeThree()">Theme 3
    </div>
</form>

好的东西，JavaScript：

function getCSSRule(ruleName, deleteFlag) {
     ruleName=ruleName.toLowerCase();
     if (document.styleSheets) {
            for (var i=0; i<document.styleSheets.length; i++) {
                 var styleSheet=document.styleSheets[i];
                 var ii=0;
                 var cssRule=false;
                 do {
                        if (styleSheet.cssRules) {
                             cssRule = styleSheet.cssRules[ii];
                        } else {
                             cssRule = styleSheet.rules[ii];
                        }
                        if (cssRule)  {
                             if (cssRule.selectorText.toLowerCase()==ruleName) {
                                    if (deleteFlag=='delete') {
                                         if (styleSheet.cssRules) {
                                                styleSheet.deleteRule(ii);
                                         } else {
                                                styleSheet.removeRule(ii);
                                         }
                                         return true;
                                    } else {
                                         return cssRule;
                                    }
                             }
                        }
                        ii++;
                 } while (cssRule)
            }
     }
     return false;
}

function setThemeOne() {
    var r = getCSSRule('.primaryColor');
    r.style.backgroundColor = "#f00";
    r = getCSSRule('.primaryBorder');
    r.style.border = "10px solid #000;";
    r = getCSSRule('.secondaryColor');
    r.style.backgroundColor = "#ff0";
    r = getCSSRule('.secondaryBorder');
    r.style.border = "5px solid #fff";
    r = getCSSRule('.t');
    r.style.color = "#000";
};


function setThemeTwo() {
    var r = getCSSRule('.primaryColor');
    r.style.backgroundColor = "#ff0";
    r = getCSSRule('.primaryBorder');
    r.style.border = "10px solid #ccc;";
    r = getCSSRule('.secondaryColor');
    r.style.backgroundColor = "#f00";
    r = getCSSRule('.secondaryBorder');
    r.style.border = "5px solid #000";
    r = getCSSRule('.t');
    r.style.color = "#ccc";

};


function setThemeThree() {
    var r = getCSSRule('.primaryColor');
    r.style.backgroundColor = "#ccc";
    r = getCSSRule('.primaryBorder');
    r.style.border = "10px solid #000;";
    r = getCSSRule('.secondaryColor');
    r.style.backgroundColor = "#000";
    r = getCSSRule('.secondaryBorder');
    r.style.border = "5px solid #fff";
    r = getCSSRule('.t');
    r.style.color = "#fff";

};

关于兼容性的注意

这个具体的例子我在IE11和当前版本的Chrome中测试过。 但是，自2011年左右以来，我在网站上部署了类似的代码，当时该网站支持浏览器返回IE7或IE8 （不记得），没有人报告过这个问题。 但我现在看到我确实修补了Chrome的getCSSRule函数。 （我没有为当前版本做到这一点。）这是补丁：

 if (cssRule){  //If we found a rule...
   // [KT] 04/24/2012 - added condition to check for undefined selector for Chrome
if ((cssRule.selectorText != undefined) && cssRule.selectorText.toLowerCase()==ruleName)){//match rule Name?

Answer 3

CSS预处理器总是赢得这里。
我会避免使用带有CSS的单独样式表，只需在一个地方定义所有颜色并进行良好的评论。 它会变得混乱css和大量的配色方案。 即

/***
RED THEME
***/
.red-theme .button {}
.red-theme a {}
.red-theme #footer {}
/***
END RED THEME
***/