動態生成的css

Question

我正在考慮用JavaScript動態生成的樣式標記替換一些靜態css文件。我的目的不是爲整個文檔構建樣式表，而是將其用於添加到頁面的插件，如製表符，幻燈片等。我目前處理的樣式表有10到20行。

我看到幾個好處：

• 負荷只有一個js文件，而不是兩個js和css
• 定義上飛主題化的能力（例如：輸入顏色變量）來定義選擇
• 能力在飛行（如命名空間中的類名）
• 新增瀏覽器特定的風格

會有什麼弊端這種方法？你能推薦關於這個主題的任何好的參考嗎？

我做了一些研究，發現了以下工具：

• less - 但仍需要加載一個單獨的樣式表
• DiceJS（顯然是一個新的圖書館）

Answer 1

另一個好處是，那就是在頁面加載每增加資產減慢了整體頁面加載，因爲瀏覽器是通常只在給定的時間同時加載4個資產。

但是，在頁面加載時完成所有的組合操作可能會導致頁面的運行速度與單獨處理的速度一樣慢......取決於需要通過迭代來構建最終的css塊。

在性能方面，我認爲javascript不太可能會優雅/高效地替換已包含在組合css文件中的樣式。

另一件事情是，在生產環境中，你也可以做另一個選擇，即使用一個庫來預先生成一組縮減，優化（並在JS的情況下模糊）代碼，然後有1 js文件和1個css文件加載在頁面加載時，這反過來你會緩存速度/加載的好處。對於這個我想，Boilerplate lib有一個腳本。

一天結束：能量既沒有創造也沒有被破壞 - 如果你不小心，你的優化在一個地方，並在別處受到傷害。

Answer 2

使用JavaScript的CSS聽起來有點亂，在我看來。正如你提到你的自我，我會建議你使用LESS或SASS或類似的。是的，它會導致一個額外的資源被加載，但我認爲這與使用JavaScript進行樣式相比是非常值得的。在我看來，這是用於這個目的的錯誤工具。

Answer 3

更少是絕對可怕的，我不認爲你應該嘗試使用JavaScript中的自定義庫生成CSS。將你的javascript儘可能與你的CSS分開是一個好主意。

我們使用某些元素class =「」屬性來觸發javascript邏輯，但它們絕不會與我們較少樣式中使用的類重疊。 （我們使用不同的套管規則來防止發生重疊）。

動態加載你的css的部分也沒有太多好處。我們在開發過程中運行less.js javascript，但我們運行'lessc'編譯器進行生產，因此我們總是有1個樣式表（並使用YUI Compressor對其進行壓縮）。

除非總的css是絕對的龐大，否則我們更喜歡在第一次點擊時加載一個大的css文件，然後將文件緩存。

確保您所有的css在任何時候都被加載（而不僅僅是部分）也有助於強制執行沒有衝突的規則。如果您必須重構應用程序並將其中的部分內容移至其他網址（突然出現所有突然重疊的情況），這將對您有所幫助。

所以我建議，而不是試圖通過動態生成所需的樣式來解決您的問題，您可能只需要更好的組織爲您的CSS。

如果您正在尋找有效使用較少的一個很好的例子，看看Twitter Bootstrap