CSS規則層疊的應用 css必須要注意的幾點

理論基礎是必要的，實踐是提升和理解理論的方法，兩者同樣重要，任何設計和開發人員離開這兩者的平衡，不論偏向哪一方，都會範或左或右的錯誤。不過我所講的這個方法在實際應用中到底有什麼用呢。顯然，它不能夠給我們創造出圓角矩形，也不能夠給我們創造出分列布局，更加不可能給我們一個固定在文檔頭部的導覽列。這個演算法的實踐應用在於： 良好的CSS編程規範 。這是一個宏觀的實踐，與我剛才提到的微觀實踐同樣重要，但卻更加難以掌握。

本文並不想包含所有的良好的CSS編程規範，也不可能，我所能夠提供的也只是我個人編寫CSS的規範小結，我想這些規範是儘可能靠近CSS的運作本質的。

不要使用inline CSS
user style不在你的掌控之內
不要使用important規則
按照特殊性從低到高編寫CSS
前三條不是我說的重點，我將一筆帶過。

inline CSS的特殊性是最高的，如果你CSS檔案中的屬性與inline CSS衝突，那麼你CSS檔案中的屬性無效，這和我們僅在CSS檔案中對樣式進行debug的習慣不符。inline CSS也是醜陋的，它將樣式插入HTML文檔，所以應當放棄使用inline CSS。

如果使用者將user style設定為important，那麼不論怎麼寫CSS規則，總是不能覆蓋使用者的important語句，所以試圖覆蓋所有的user style是徒勞的。高興的是我們不需要考慮這些了。

important規則是個異類，它不符合我們慣有的思維方式，不論我們如何增加CSS規則的特殊性和先後順序，important規則都將覆蓋與它競爭的規則，這也會打亂CSS規則的習慣規律，給debug帶來麻煩。如果你要 使用important規則來hack瀏覽器 ，那麼你應當在一個指向唯一元素的selector中應用該規則。（PS. hack應當是解決方案中最後考慮的一項，因為它長得太醜陋了。）

最後一點，如何做到按照特殊性從低到高編寫CSS？

關鍵在於 模組化CSS 。

添加全域CSS
添加當前頁面統一CSS
將頁面分成幾個模組
在每個不同模組上使用id掛鈎，相同模組上使用class掛鈎
添加每個模組的統一CSS
將每個模組分成幾個子模組，並且回到第4步開始迴圈直至樣式添加完成。
編寫良好的CSS是一個設計問題，而不是一個實現問題。我們首先應當將編寫特殊性非常低的全域CSS內容，也就是我們 常用的reset.css 。它是我們整個網站中所有頁面的預設樣式。

如果有哪個頁面具有獨特的統一樣式，如某一頁的背景與其他頁面不同，那麼我們可以給某一頁面添加ID，然後在ID下編寫當前頁面的統一CSS。

body#special{
background-color:black;
}
統一樣式編寫好後，我們將頁面分成幾個模組，如果這些模組具有基本相同的樣式，那麼使用class掛鈎，如果樣式並非相同，那麼使用id掛鈎，以後每次分模組時都應當遵循這一原則，因為class的特殊性不高，所以如果不是看起來顯然類似的模組，就不應當使用class。id的名字通常可以模組的用途作為名字。如 head 、 bottom 等。id selector在層疊中起了關鍵作用，因為id具有排他性，還具有較高的特殊性，能夠防止CSS規則被不經意的覆蓋。

在某個模組中我們可能有一些統一CSS，那麼我們就需要在使用id selector來編寫當前模組下的統一樣式。

#head p{
color:red;
}
添加class掛鈎時，我建議使用父模組（或者頁面本身）的id在作為class名的第一部分。如果我添加一個獨立的頁面(body#special)，那麼為該頁面分好模組後，我應當將該頁的模組命名為 special_head 、 special_bottom 等。

或者在某些頁面模組中使用class掛鈎時應當使用 head_col 等。這樣做的好處是我們不用使用

#head .col{
/* 頭部中每一列的樣式 */
}
而可以直接使用

.head_col{
/* 頭部中每一列的樣式 */
}
從而不用擔心命名衝突。

而對於模組下直接添加了id selector的元素，我們可以直接使用該selector，並且也在其名字前添加父模組的id。

#head_navigator{
/* 頭部中導覽列的樣式 */
}
要做到模組化CSS我們應當盡量防止跨模組的CSS出現，我想一條好的原則是：如果某一樣式的跨模組特性不是你一目瞭然的，那麼就不要使用跨模組的CSS。一個例外是全域CSS或者模組內的統一CSS。而對於那些並非一目瞭然的，並非具有統一樣式的，建議在每個子模組下分別定義。這就像是編寫Java程式中的物件導向的設計一樣，我們要降低模組之間的互相依賴，使得相同模組的CSS規則在一起，略有不同的就完全分開，這樣不但易於維護，還能夠保證特殊性從低到高地編寫CSS，從而防止CSS規則被意外的覆蓋