轉載 css--命名規範

近日看了張大神關於CSS命名規範與準則的文章(精簡高效的CSS命名準則/方法CSS樣式分離之再分離),感覺受益匪淺。現在就此來總結一下:

一、關於css命名方式
1、面向屬性的命名方法:
(1)放棄 類似於help-guest-regist 就是”幫助-顧客-註冊”這樣的命名方法(即根據功能來命名),因爲這樣的命名方式不利於樣式的複用(如果在用戶中心也有一個類似的樣式,本來可以用來複用的代碼,此時只能先重新定義css樣式名稱再進行代碼使用。因爲不修改名稱的話直接用在用戶中心那麼名字這塊也是錯誤的,顯然是錯誤的)。
(2)使用 面向屬性的命名方法:何爲面向屬性的命名方法?簡單來說就是根據要定義的css屬性來進行命名(不要管頁面什麼位置,什麼內容),例如:(嘿嘿,直接照搬大神的代碼!果然有點不要臉)

.tr{text-align:right;}
.pb8{padding-bottom:8px;}

這樣的css命名起到了高效複用的結果,同時,減小了命名長度。但是這裏的分離並使用面向屬性的命名方法更多的是針對於網站非通用元素,如果樣式簡單(1~2個屬性),對其分離並使用面向屬性的命名方法。, 如果使用在通用元素上面,可能出現的問題是,通用元素運用在廣大的頁面部分,但是某一塊需要改動,就gg了。

二、精簡高效CSS命名之“三無原則”
此“三無原則”就是:無ID,無層級,無標籤
CSS命名就應該最簡單、最直接,直搗黃龍。沒有HTML標籤,沒有層級,原因如下:
(1)層級、ID、標籤嵌套都會限制屬性重用。例如:p.test 其實p是無用的,同時還限制了其他的標籤使用,假如一個div也有test樣式,那麼樣式複用又gg了。
(2)CSS文件大小
屬性命名儘量在15字符以內,這樣既美觀又能減小css文件的大小。
(3)降低了渲染效率(這段直接抄襲大神的)
來個例子考考大家(以後我面試別人可能就會考這題),HTML如下:

<div id="test">
    <ul class="test"></ul>
</div>

現在要給這裏的ul標籤一個樣式,比如說padding-left:25px;那麼下面四種寫法哪個渲染速度最快?

#test .test{}ul.test{}#test ul{} 以及.test{}

如果單純的ul與.test PK,我還真拿不定誰的渲染速度更快些。但是,一旦牽扯到層級與標籤,我100%確定,.test這種最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript獲取頁面元素那是完全不一樣的。如果是使用JavaScript獲取DOM元素,則#test ul{}速度是最快的,先id獲取,再tag獲取,這些可都是JavaScript內置的方法。但是,CSS的渲染方式則是屬於外太空系的了,《高性能網站進階指南》一書曾提到CSS的渲染方式是“從右往左”渲染的,就拿#test ul{}舉例,先渲染頁面上所有的ul標籤,再去尋找id爲test的元素,所以,出現#test div{}這種寫法的人都是傻×的,頁面先渲染id爲test的元素?非也!先渲染頁面上所有的div,再去尋找其老爸有沒有id爲test的元素。由於這種渲染差異最大就200~300毫秒(補充:這裏的差異不是說單純一個樣式的差異,而是這些寫法氾濫的頁面的全部渲染,其渲染差異數據可以參見“翻譯-不同CSS技術及其CSS性能”一文),我們人一般是感覺不到的。所以,長久以來,也都不以爲然。但是,我是絕對容不下這種寫法的,還有,要是讓我看到類似於ul#test{}這樣子的命名,不好意思,面試肯定過不了。

所以,CSS命名,只要出現了層級,出現了標籤,就是一次額外的渲染,層級越多,渲染的開銷也就越大,這就是爲什麼一些前輩的文章會建議要儘量避免過深的層級。這也是爲什麼要“無層級”,“無標籤”。

對於原則第一條“無ID”,其實與性能沒有多大關係,只是一般ID都與JavaScript有姦情,如果再牽扯到CSS樣式,如此複雜的三角關係,日後不好處理啊。

三、總結
關於樣式分離要先權衡,何時分離,哪些要分離?不能一味的全部分離也不能都不分離。

還有一篇CSS的樣式合併與模塊化

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章