針對大量主題的可維護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
***/