CSS樣式分離之再分離達到精簡與重用

2024-07-11 08:49:28

字體：大中小

來源：轉載

供稿：網友

一、關于CSS樣式分離
zxx://一些名詞表意含有自己的理解成分，或許與您的理解有偏差，希望不要拘泥于措辭。
無論是CSS的分離還是js的分離，其主要作用之一就是精簡與重用。
CSS本身就代表著精簡與重用。例如我們可以設置一個如下的樣式：
.example{color:red;}所有想讓文字顯示紅色的標簽都可以應用這個樣式，這比10年前使用font標簽，將color樣式寫在font標簽上（尤其標簽多時）要精簡很多代碼，代碼可讀性也更佳。
CSS樣式分離，我一般指的是“以單獨的CSS文件將CSS樣式分離出來”，此處的重用多針對不同頁面的重用，就是說，一個樣式文件，可以多個頁面使用，這對于一些公共樣式的重構是很有用的。當然，對于一些重要的頁面，例如淘寶首頁，直接將CSS嵌在了頁面頭部，其降低鏈接請求的重要性要大于樣式的重用。
以上估計大家都是很熟悉與常用的，我一般不會拿一些眾所周知的白蠟拿來嚼的。本文會展示一些新的東西，關于CSS樣式分離再分離。本文核心不在于展示如果分離，而是傳達一種“庫”與“CSS高度重用”的概念，同時也是為后面的文章“我是如何對項目CSS進行架構”做鋪墊的。

二、CSS樣式分離之再分離
“CSS樣式分離之再分離”表型上的兩個特點為“分離”和“命名”，掌握與理解其深層次思想的關鍵是思維方式的轉變，這包括“CSS庫概念”意識。舉個例子吧，依照現在主流的寫法，下截圖所示的灰色背景的框框命名與樣式可能如下：
pic

復制代碼

上一篇：ie7下z-index失效問題解決方法(詳細分析)

下一篇：CSS的樣式合并與模塊化提高代碼執行效率