首頁 > web前端 > css教學 > 主體

CSS規則層疊的應用 css必須要注意的幾點_經驗交流

PHP中文网
發布: 2016-05-16 12:06:06
原創
1376 人瀏覽過

理論基礎是必要的,實踐是提升和理解理論的方法,兩者同樣重要,任何設計和開發人員離開這兩者的平衡,不論偏向哪一方,都會範或左或右的錯誤。不過我所講的這個方法在實際應用上到底有什麼用呢。顯然,它不能夠為我們創造出圓角矩形,也不能夠為我們創造出分列佈局,更不可能給我們一個固定在文件頭部的導覽列。這個演算法的實踐應用在於: 良好的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規則被意外的覆蓋

以上就是css規則層疊的應用css必須要注意的幾點_經驗交流的內容,更多相關內容請關注php中文網(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板