高品質的CSS篇
怪異模式和DTD
不知道大家在使用IE8/9/10時使用開發人員工具看沒看到這麼幾個選項:
其中的Quirks就是怪異模式，所謂怪異模式，就是為了相容比較老的能夠正常瀏覽而產生的一種模式，它的很多解析方式是不符合標準的，以至於現在幾大門戶網站對待這種怪異模式也是沒有辦法。不過大家大可不必去操心這種模式，因為那麼老的瀏覽器使用者也應該沒有了吧？（比如IE4、5等），但是大家在編寫前台代碼的時候也一定要注意防止瀏覽器將你的代碼以怪異模式的方式來解析！這裡我們就有必要提到DTD了，DTD全程為Document Type Definition，中文名稱就是文件類型定義，通過定義正確的DTD，就可以保證瀏覽器的解析方式。一下就是HTML中幾種常見的DTD文檔（具體大家可以參考園子裡另外一個同學的文章<!DOCTYPE> 標籤的深度剖析以及使用選擇）
用於HTML 4.01的嚴格型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">用於HTML 4.01的過渡型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> 用於XHTML 1.0的嚴格類型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">用於XHTML 1.0的過渡型<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
但現在隨著HTML的發展，我個人更推薦最新最簡潔的用法：
<!doctype html>
發現很多大型網站也開始使用這個DTD了，而且，至少在MVC3裡面自動產生的程式碼也是這個DTD，前段時間偶然發現網易郵箱都用上HTML5語義標籤了。
CSS分層
作者推薦了他個人更喜歡的一種CSS組織方式：base.css+common.css+page.css,將網站內的樣式，按照職能分成以上三大類，這三者並不是並列的，而是層疊結構：
| page |
| common |
| base |
1.base層提供了CSS reset 功能和粒度最小的原子類，這一層與具體的UI無關。base層其實並不用我們自己去造輪子，大家可以看看雅虎YUI的css reset 和css base，地址：http://yuilibrary.com/yui/css/。個人覺得直接搬過來就行。
2.common層 這一層位於中間，提供組件級的CSS類。現在編程，大部分我們都考慮物件導向的思想來開發，其實，有很大一部分，就是想要提高代碼的重用性，CSS中當然也補例外，common這一層，我們就應該想到如何儘可能多的去複用代碼。common層是網站界別的，不同的網站有不同的common層，同一個網站只有一個common層。這裡附上網易首頁的一個，相信大家很快就會明白common這一層的大概意思。
3.page層位於頂層，提供頁面層級的樣式，每個頁面都可能有自己單獨的page層CSS。page層可以內建在相應的頁面中，但是這樣沒有徹底將樣式從HTML檔案中分離開來，所以作者建議是將網站內所有的page層統一放在一個page.css檔案中，通過頁面注釋，分塊書寫，便於維護，如下所示：
/*首頁*/.test{}.test1{}/*關於我們*/.test2{}.test3{}/*聯絡我們*/.test4{}.test5{}
CSS命名空間
嘿嘿，一般在後台語言中才有命名空間這回事的，怎麼在CSS中也會存在呢？試想，如果多個人在合作開發前端，那麼如果在某個頁面工程師A使用了.test這個命名，工程師B也恰好用了相同的名稱，那麼如果同一個頁面同時使用了這兩個CSS，那衝突就來了。
所以，為了規範好前端開發，首先，作者推薦了一種結合駝峰命名與劃線命名結合而來的方法：
.timeList-lastItem 很明顯，".timeList-lastItem"是".timeList"的".lastItem"
那麼既然劃線就可以決定從屬關係，我們就可以將這種方式推廣到這個網站，在base層和common層因為使用於全域，就不加首碼，而像page層，就可以在其前面加上首碼，如下所示：
<div class="box"><div class="box-hd"></div><div class="box-bd"></div><div class="box-ft"></div></div>
以上就是這期的筆記了，敬請期待下次的 《web前端開發修鍊之道》讀書筆記-CSS篇之"含苞怒放"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
