我的css架構(gòu)理念―因人而異沒有最優(yōu) 只有適合

2024-08-30 08:34:59

字體：大中小

供稿：網(wǎng)友

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

從語義化開始
看《css禪意花園》這類比較優(yōu)秀的書籍就會發(fā)現(xiàn)，開篇一定會先提到html語義化。什么是html語義化？其實(shí)很簡單，html就那么幾個標(biāo)簽，table標(biāo)簽用做表格、p標(biāo)簽用作文章段落、h系列標(biāo)簽用作標(biāo)題，不要整個html頁面除了a全部div+span。不得不說，xhtml在定義標(biāo)簽上是有一定局限的，于是在html5里有增添了許多結(jié)構(gòu)化標(biāo)簽，從這方面來看，html語義化也是相當(dāng)重要的，已經(jīng)作為規(guī)范確立下來了。

為什么要做到html語義化？
嚴(yán)格來說，這是要?dú)w到上個段落篇幅的，之所以單獨(dú)出來，是因?yàn)檫@跟本文的宗旨聯(lián)系緊密。但是，現(xiàn)在還是沒法說，不是賣關(guān)子，而是如果這個時候提出來，很難說清楚，大家看著也會云里霧里。如果您有耐心，繼續(xù)看下去，會理解的。

圖文并茂---我的css架構(gòu)理念

（圖1）

（圖2）

圖1是我目前項(xiàng)目的css目錄結(jié)構(gòu)，圖2是我從MindManager中截下來的圖，兩個圖會對我下面的文章起到較大幫助。由圖2說開去：
1.Css通用庫（global.css）：該樣式表可以在所有的網(wǎng)站上使用，只要是個網(wǎng)站，就可以導(dǎo)入這個樣式表。它涉及css各個方面，比如css重置樣式、css的布局樣式、邊距、字體、字號、對齊方式，css通用庫是css樣式分離原則的直接體現(xiàn)（這里說的樣式分離和接下來要說的樣式組合原則是兩個較為復(fù)雜的概念，要很好地理解需要另外的篇幅來解釋，所幸這樣的文章還是有的，有時間可以看看前端牛人張鑫旭的博客文章：css樣式分離之再分離、css樣式合并與模塊化。我的css通用庫跟網(wǎng)上可見的大同小異，您如果有需要，可以直接在張鑫旭的相關(guān)文章中找到。下面附上我的css通用庫截圖：

2.網(wǎng)站通用css（ktv_style.css）：該樣式表遵循樣式組合原則，什么樣式可以放進(jìn)這個樣式表？就是整個網(wǎng)站通用的模塊，比如網(wǎng)站通用文字和鏈接文字的顏色、頂級導(dǎo)航、邊框線、通用標(biāo)題、網(wǎng)站底部、評論功能模塊等等，該樣式表牽一發(fā)動全身，改一個樣式，所有的頁面都隨之改動，所以，在改這個樣式的時候要慎重。
3.單頁面css（pages目錄下的所有樣式表）：就像index.css這樣的首頁樣式表，每個頁面都獨(dú)立出一個，這樣做的目的是為了解決重命名引發(fā)的樣式?jīng)_突問題。這個問題會隨著項(xiàng)目越大、頁面結(jié)構(gòu)越復(fù)雜而越來越凸顯。在頁面調(diào)用了不同的樣式表之后，那么即使html頁面使用了相同樣式命名，也不會出現(xiàn)沖突問題。
4.插件用到的css：該目錄下用的css基本上是引用的js插件的相關(guān)樣式表，之所以獨(dú)立為一個文件夾，是為了維護(hù)的方便。
以上4點(diǎn)大體上說清了我的css架構(gòu)，每一點(diǎn)如果細(xì)細(xì)地講解下去，會有很多可講的東西，比如前面一兩點(diǎn)提到的樣式分離組合原則，如果本文沒法理解透徹，那么建議先去看相關(guān)文章。文章到此為止了嗎？答案是否定的。

模塊化你的樣式表
從這里開始，我們可以來談?wù)劄槭裁匆龅絟tml語義化了。
你是否有這樣的習(xí)慣，寫一個div，定義一個樣式名，往div里寫另一個標(biāo)簽，再定義一個樣式名，然后到相應(yīng)的css里書寫樣式？是的，誰不曾是呢！但是，我覺得這不是很好的做法。不好的地方有兩點(diǎn)：
1、你得花費(fèi)不少的精力去考慮樣式的命名，命名是一件多么讓人惡心的事情；
2、拋棄這種寫法轉(zhuǎn)向模塊化處理樣式表，那么你會漸漸擁抱html語義化準(zhǔn)則。這不是虛言，請往下繼續(xù)。

如何模塊化樣式表
模塊的含義：在我的理解里，模塊就是具有相同業(yè)務(wù)邏輯的、功能一樣或接近的，讓用戶看來這些元素就應(yīng)該放在一起的一個集合。比如登錄后微博首頁的“可能感興趣的人”：