當前位置:編程學習大全網 - 編程語言 - CSS規則層疊的應用css必須要註意的幾點_經驗交流

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規則被意外的覆蓋

  • 上一篇:計算機二級已經過了。有證書嗎?是職業資格證書嗎?
  • 下一篇:導航編程介紹
  • copyright 2024編程學習大全網