本文同步至微信公眾號：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect 二維碼： 一直覺得c
本文同步至微信公眾號：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect
二維碼：
一直覺得css是一個不被重視，或者說是重視不夠的飯後甜點。因為它太“簡單”，門檻低，不能彰顯或提升廣大悶騷程式猿的逼格。。。一直都想聊聊css相關的一些雜碎。正好借最近的一次項目實踐來侃侃css。
玉伯曾發文章做過類似的比喻說：“css就像語文。大家都認識漢字，也都會寫漢字，但是也只有那些牛逼的作家才能寫出優秀的文章，而我們卻不能”。也就是說css易學難用。一個項目隨著頁面的增多，css的代碼數量也可能直線飆升。不僅載入起來比較慢，對維護的人來說，也不確定這些代碼都有什麼地方在用，輕易不敢動。。因此，css樣式復用的重要性就可想而知了。而這個也是新手或對css不夠重視的人欠缺的。。
上面這些，是不是很虛？不羅嗦了，先上頁面設計圖（一個答題頁面），分析頁面佈局先：
從設計稿上看，最直觀的就是頁面中的每一個問題的樣式是統一的，也就是可以把問題當作一個question模塊進行開發。但是就佈局而言，縱坐標上，這些問題的縱坐標好無規律。怎麼確定這些問題在頁面中的位置呢？私想了一個辦法，看下一張圖:
沒錯，就是把整個頁面拆解成一個一個的格子。私是把每到題放到500*500的格子，這樣，問題就在格子里相對於格子來進行定位，就簡單多了。以上就是頁面的佈局。
然後是具體的代碼了：
最開始當然是css reset了，
大家都知道，瀏覽器對於標簽是有預設樣式的。比如a標簽預設是有下劃線，li標簽預設有一個小點等。然而不同的瀏覽器對於這些元素的預設值不盡相同，為了屏蔽瀏覽器對元素預設樣式的差異，我們需要重置部分元素的樣式。可能大家都看過reset.css。那裡面重置的樣式有好多，我覺得完全沒有必要。我的css reset就上面只有上面這些就夠了。我也並不是說別的版本的cssreset就不好。脫離的實際的業務單純的談論某個類庫的好壞，高下都是不可取的。沒有最好的框架，只有最適合自己業務的框架。。
然後是css原子類。所謂的css原子類，入下圖：
為什麼要有這些css原子類呢？一個大型的項目，一些常用的css規則，比如text-align,float,border,positon等有可能出現十幾次，幾十次。。加入我們已經在項目開始的時候就已經定義好了我們的css原子類，那麼在需要左浮動的元素上只需要引入.fl的class就可以了。原來需要出現幾十次的float:left現在只需要出現一次就可以了（理論上是這樣）。從理論上講，只要我們把每個css原子類都定義成一個原子類，那麼我們就可以通過這些原子類的不同組合來完成我們的頁面了。css原子類是跟具體的項目和業務無關的，定義好的css原子類可以應用到任何的項目當中。css樣式分離的確實徹底，其可復用性就越高。就像這些原子類。但是，當一個元素引入的css原子類多起來的時候，那麼這個元素的class的值也會快速膨脹起來。。。我在寫頁面的時候，所能接受的class值得最多的個數是4個。考慮到這個問題呢，就引入了下一個話題，css模塊化。
通常一個項目一個站點，要考慮到站點整體的風格統一。正式因為風格統一，所以大部分的css樣式都是可以復用的。比如我本次的項目來說，問題就可以看成是一個模塊。問題的html如下
qh是標題，qa是三個選項。最外層的div就是格子，qwrapper相對於格子進行定位。然後定義統一的css樣式。雖然頁面上有十道題，我只需要寫一次html和css.
對於每到題目的個性化的樣式用過.question1, .question2等類來實現。說到這裡，其實這個頁面的css樣式就差多多了。實際效果見第一張圖。在開發中除了這種一個區塊看作一個模塊來處理之外，比如頁面中的所有的buton，text也可以看成一個模塊。在需要有button的地方，只需要引入.btn就可以了。就像bootstrap。。。這裡需要註意，定義模塊樣式的時候，只能定義那些穩定的公共的樣式。就文本框而言，有的地方的文本框的寬度是100，有的地方是80，這個時候我們就需要把width從樣式中分離出去。想下麵這樣
.txt {
height: 30px;
line-height:30px;
backgroud:#fff;
font-size:14px
}
那麼寬度為100的文本就可以寫為：
<text class="txt w100"/>
寬度為80的就可以寫為：
<text class="txt w80"/>
.w100為上文中的原子類.w100 {width: 100px}
通過這種方式把項目中的可復用的區塊進行模塊化。後續開發的時候，只需要引入之前定義好的類庫就行了。假設開發之前，我們已經認真的分析過設計稿。分析過那些組件式公共的，在頁面中重覆出現的。我們就可以開開發初期先開發這些公共的樣式，便於後期復用。剛開始的時候，可能會慢一些，但是越到後期會越輕鬆。
當完成上面的這幾步的時候，理論上一個項目的大部分的css樣式就已經開發完成了。後續再寫頁面的時候，只需要引入我們定義好的類就行。仿佛就像是我們針對自己的項目開發了定製版的"bootstrap"...剩下的就是頁面特有的頁面級的css了。
考慮到時間和篇幅關係，就不往下寫了。以上是我寫css的套路。私以為，每個人都應該有自己的套路和模式。形成自己的風格。。。以上的都是個人觀點，如果有不對的地方，或者有不同意見的歡迎交流討論哈
