CSS優化 - dom中的額外類或預處理器 - css文件中的重複樣式？

我開始一個相當大的項目，我正在考慮使用LESS來預處理我的CSS。CSS優化 - dom中的額外類或預處理器 - css文件中的重複樣式？

大約少有益的事情是，你可以定義包含例如一個mixin：

.border-radius(@radius) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    -o-border-radius: @radius; 
    -ms-border-radius: @radius; 
    border-radius: @radius; 
}

，然後用它在一個類聲明

.rounded-div { 
    .border-radius(10px); 
}

得到輸出CSS作爲：

.rounded-div { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -o-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
}

這對於瀏覽器前綴的情況非常有用。然而，這同樣的概念可以用於封裝常用的CSS，例如：每當我需要在我的設計中列

.column-container { 
    overflow: hidden; 
    display: block; 
    width: 100%; 
} 
.column(@width) { 
    float: left; 
    width: @width; 
}

，然後用這個混入：

.my-column-outer { 
    .column-container(); 
    background: red; 
} 
.my-column-inner { 
    .column(50%); 
    font-color: yellow; 
}

（當然，使用預處理器，我們可以很容易地擴大這個是更有用的，例如，通過列數和容器寬度作爲變量，並且根據列數和容器寬度確定每列的寬度！）

問題是這個時候編譯後，我的最終css文件將有100個這樣的聲明，複製&粘貼，使文件巨大，臃腫和重複。對此的替代方案將是使用對每個列布局選項具有預定義的類的網格系統，例如， .c-50（帶有「float：left; width：50％;」定義），.c-33，.c-25以適應2列，3列和4列布局，然後使用這些給我的爸爸上課。

我真的不喜歡額外的類的想法，從經驗結果到臃腫的DOM（創建額外的div只是爲了附加網格類）。另外最基本的html/css教程會告訴你，dom應該與樣式分離 - 網格類與樣式相關！對我來說，它就像在上面的.rounded-div例子中附加一個「border-radius-10」類一樣！

。另一方面，這將導致重複代碼的大css文件也是不利的

所以我想我的問題是，哪一個你會建議和你使用哪一個？

以及哪種解決方案最適合優化？除了較大的文件大小之外，甚至還有關於瀏覽器是否比一個大的css文件更快地渲染多個類的研究，或者相反？

我很想聽聽您的意見！

來源

2012-06-08 anna.mi

我不會說一個很大的CSS文件（在合理的範圍內）是一件壞事 - 瀏覽器會緩存它，而CSS在下載大小方面經常被諸如jQuery之類的東西所掩蓋，即使是一個龐大的CSS文件。您是使用PHP腳本編譯服務器上的LESS，還是使用JS庫編譯客戶端？ – Bojangles

@JamWaffles絕對使用預編譯的CSS在現場，js進行開發！ –

從我的角度來看，使用JS在客戶端編譯LESS會降低性能，並且會對瀏覽器造成額外的負擔。但是如果你可以在服務器上編譯它，那麼web服務器就可以gzip並將其轉移到客戶端。
無論如何，我個人更喜歡在服務器端編譯，因爲：

我不能在非現代瀏覽器
信任性能JS LESS編譯器即使我不能客戶端編譯器的信任功能，因爲每個瀏覽器可以有它自己的輸出。另一方面，我可以依靠我的服務器端編譯作業。

來源

2012-06-08 18:53:07

其實這並不是我所要求的.. –

你能解釋一下嗎？ –

總結，問題是瀏覽器是否更有效地爲每個div（=較小的更多模塊化css文件）渲染一個具有多個類的DOM，或者每個dom元素在一個類中具有所有css定義的一個類基本上導致一個更大的CSS文件） –

CSS優化 - dom中的額外類或預處理器 - css文件中的重複樣式？

回答

相關問題