▲我的css架構理念

前言 

做前端已有不短的時間了，在css這片領域越走越久、越走越遠，回過頭來看看，有很多技能知識掌握了就不會再忘了，比如無圖片實現三角形、ie下如何?半透明效果等等；但有些東西卻需要在項目實戰中不斷地碰壁、總結，再碰壁、再總結，慢慢地去找到適合自己的方法，然後遵循這樣的方法，去開發，以收到事半功倍的效果。本篇文章就屬於後者，因為是站在整個css的大方向上，對於初學者或者項目實戰經驗不夠多的同學，建議有看不懂的地方不必太介意，可以跳過，也可以留言提問。經驗老道者也許也會些許吐槽，覺得跟您有出入，但是，我想說，css架構，因人而異、因項目大小而異，沒有最優，只有適合！

從語義化開始

看《css禪意花園》這類比較優秀的書籍就會發現，開篇一定會先提到html語義化。什麼是html語義化？其實很簡單，html就那麼幾個標籤，table標籤用做表格、p標籤用作文章段落、h系欄標籤用作標題，不要整個html頁面除了a全部div+span。不得不說，xhtml在定義標籤上是有一定局限的，於是在html5裡有增添了許多結構化標籤，從這方面來看，html語義化也是相當重要的，已經作為規範確立下來了。

為什麼要做到html語義化？

嚴格來說，這是要歸到上個段落篇幅的，之所以單獨出來，是因為這跟本文的宗旨聯絡緊密。但是，現在還是沒法說，不是賣關子，而是如果這個時候提出來，很難說清楚，大家看著也會雲裡霧裡。如果您有耐心，繼續看下去，會理解的。

圖文並茂---我的css架構理念

        

（圖1）

（圖2）

圖1是我目前項目的css目錄結構，圖2是我從MindManager中截下來的圖，兩個圖會對我下面的文章起到較大協助。由圖2說開去：

1.         Css通用庫（global.css）：該樣式表可以在所有的網站上使用，只要是個網站，就可以匯入這個樣式表。它涉及css各個方面，比如css重設樣式、css的配置樣式、邊距、字型、字型大小、對齊，css通用庫是css樣式分離原則的直接體現（這裡說的樣式分離和接下來要說的樣式組合原則是兩個較為複雜的概念，要很好地理解需要另外的篇幅來解釋，所幸這樣的文章還是有的，有時間可以看看前端牛人張鑫旭的部落格文章：css樣式分離之再分離、css樣式合并與模組化。我的css通用庫跟網上可見的大同小異，您如果有需要，可以直接在張鑫旭的相關文章中找到。下面附上我的css通用庫：

2.         網站通用css（ktv_style.css）：該樣式表遵循樣式組合原則，什麼樣式可以放進這個樣式表？就是整個網站通用的模組，比如網站通用文字和連結文字的顏色、頂級導航、邊框線、通用標題、網站底部、評論功能模組等等，該樣式表牽一髮動全身，改一個樣式，所有的頁面都隨之改動，所以，在改這個樣式的時候要謹慎。

 

3.         單頁面css（pages目錄下的所有樣式表）：就像index.css這樣的首頁樣式表，每個頁面都獨立出一個，這樣做的目的是為瞭解決重新命名引發的樣式衝突問題。這個問題會隨著項目越大、頁面結構越複雜而越來越凸顯。在頁面調用了不同的樣式表之後，那麼即使html頁面使用了相同樣式命名，也不會出現衝突問題。

 

4.         外掛程式用到的css：該目錄下用的css基本上是引用的js外掛程式的相關樣式表，之所以獨立為一個檔案夾，是為了維護的方便。

 

以上4點大體上說清了我的css架構，每一點如果細細地講解下去，會有很多可講的東西，比如前面一兩點提到的樣式分離組合原則，如果本文沒法理解透徹，那麼建議先去看相關文章。文章到此為止了嗎？答案是否定的。

 

模組化你的樣式表

從這裡開始，我們可以來談談為什麼要做到html語義化了。

你是否有這樣的習慣，寫一個div，定義一個樣式名，往div裡寫另一個標籤，再定義一個樣式名，然後到相應的css裡書寫樣式？是的，誰不曾是呢！但是，我覺得這不是很好的做法。不好的地方有兩點：1、你得花費不少的精力去考慮樣式的命名，命名是一件多麼讓人噁心的事情；2、拋棄這種寫法轉向模組化處理樣式表，那麼你會漸漸擁抱html語義化準則。這不是虛言，請往下繼續。

如何模組化樣式表

模組的含義：在我的理解裡，模組就是具有相同商務邏輯的、功能一樣或接近的，讓使用者看來這些元素就應該放在一起的一個集合。比如登入後微博首頁的“可能感興趣的人”：

 

這樣的模組包括：標題列、簡單的列表。

微博對這個模組的處理代碼，大家可以自己用firebug查看，比較複雜，如果是我來布局這個模組的代碼，很簡單，我會這麼寫：

<div class=”friend_love”>

         <h2>可能感興趣的人</h2>

         <ul>

                   <li></li>

        </ul>

        <em>找人</em>

        <span></span>

        <a class=”more”>更多</a>

</div>

你看看是否可以理解我為何這麼寫，每行代碼都是有考慮的，包括樣式命名。我並非說微博的前端人員不怎麼樣，因為前端代碼的書寫要根據項目的方案、後端資料的呈現而做相應的調整，但是如果你僅僅是做前端方面的書寫，第一次書寫出的代碼就應該足夠簡單、語義明確。通過上面的html代碼，你可以布局自己的樣式：

.friend_love h2{}

.friend_love ul{}

.friend_love em{}

.friend_love span{}

.friend_love .more{}

你還可以在樣式表中進行注釋：/*friend_love*/；

如果在另外一個頁面中也需要調用這樣一個模組，就可以很好地拷貝，這麼一個模組，兩個樣式命名，你還在為命名發愁嗎？也許em這個元素只需要填寫float:left的樣式，那麼恭喜你，你連寫這個樣式的必要都沒有了，直接在結構標籤中調用global.css裡的樣式：<em class=”fl”></div>，為什麼是fl，請參照global.css裡左浮動樣式的定義。

 

前面說過，css架構因人而異、因項目大小而異，我沒有任何理由讓你採用我這還不被驗證是否成熟或合理的做法，只是個人覺得可以用，也還好用，拋磚引玉而已！