精簡高效的CSS命名準則/方法

1、「無」的哲學

佛家講究「因果報應」，有果必有應。此段看似與主題沒有血緣關係，實際講的是「因」。

我我的比較喜歡老子的道家思想，並喜歡以其思想解釋學習與工做中遇到的一些問題。例如我以前寫過的「中國古代道家思想與網頁重構的思考」一文。

老子有云：「天下萬物生於有，有生於無」。具體解釋就是：天下萬物都是由看得見的具體事物（「有」）產生的，而看得見的具體事物（「有」）又是由看不見的，無形無狀的東西（「無」）產生的，這個看不見的「無」也就是「道」，或叫作「根」、「母」。

咱們看武俠片，常常聽到「無招勝有招」這句話，這也是道家「無」之思想之體現。由於你心中沒有招式，你纔能有無限的可能，生成其餘的招式以克敵，即 所謂以不變應萬變；相反，若是你心中牢記一套「華山劍法」，當你與人交手時，勢必按照此套路走，要是遇到相剋之劍法，結局就是一敗塗地。「無招」是一種境 界，是你功夫修煉到必定程度才能領悟到的。咱們這代人應該都看過李連杰主演的《倚天屠龍記魔教教主》，其中張三丰老頭教完張無忌太極拳後問他「記住了沒？」張無忌一句「全忘記了！」讓人印象深入。這就是「無」的境界。

這種境界我是深有體會的。例如每逢大考以前，我老是把之前作過的題目所有忘掉，這樣，考試時就能思如泉涌；反而是強記題目的作法限制了發揮。這就好 比發射炮彈，炮管裏提早預裝了重型炸蛋，結果戰鬥開始時，發現須要的是煙霧彈，此時，反而被預裝的炸蛋給阻塞限制了。打籃球也有這種體會，若是心中記得的 是動做，我要這麼走，而後這麼作，每每表現不佳。反而是腦中什麼想法也沒有，全靠下意識行動，那真是所向披靡，得分如探囊取物。

可見，要想發揮更大，就須要「無」，把一些「限制的東西」統統去掉。沒有限制才能發揮出最大的潛能。站在最簡單，最原始的那個點上，你才能自由馳騁，應變自如。

2、名字的本質是什麼

咱們有沒有思考過這麼一個問題：名字的本質是什麼？
這個問題其實不難，名字本質上就是一個符號，用來區分人與人的。與符號同樣，名字自己就蘊含着不少的信息。舉個例子，個人名字：張鑫旭。其中蘊含的信息 有：我老爸也姓張，我是上午太陽剛剛升起的時候出生的，我五行缺金。一個名字，若是其蘊含的信息越多，則這個名字就越獨特，也就是說，越不可能被別人使 用；相反若是這個名字很普通，例如李娜、張豔之類，就會被大規模的重用，OK，這其實沒什麼大不了的，咱們的惟一身份標識不是名字，而是身份證，可是，對 於CSS樣式的命名，衝突與否可不是拉便便，擦個屁股就沒事的。

對於CSS，爲了不樣式衝突，咱們總會給其賦予至關特殊的命名，或是在選擇符上添加HTML標記，或是使用層級。所謂一朝怕蛇咬，十年怕井繩。一 旦咱們經歷過樣式衝突帶來的讓人吐血的麻煩後，咱們可能就會時時在避免衝突上狠作文章，所謂過猶不及，結果又是一個爛攤子，本如花似玉的黃花小閨女變成個 臃腫的肥妞。例以下面人人網的CSS命名：

我想咱們都但願寫出精簡高效的CSS代碼，若是CSS重用性越高，想必就越高效。這如人的名字同樣，若是名字越普通，越沒有含義，越容易被重用，所 以CSS要想重用性高，就須要命名簡單。可是，簡單的命名越容易形成樣式衝突，例如.more{}。從這點上來講，重用性與樣式衝突時兩個對立的矛盾體。

不過，萬幸的是，這種矛盾並非不可調和的。記住一些準則/方法，CSS既能夠有高度的重用性，又不會有樣式衝突的困擾。下面就將介紹這些命名方法。

3、面向屬性的命名方法

咱們習慣在CSS命名的時候摻雜語義，這樣可讓代碼更易懂。例如淘寶首頁「免費註冊」按鈕上的class名稱：help-guest-regist

上面的class命名語義就很明顯，獨眼龍看告示——一目瞭然，」help-guest-regist」就是」幫助-顧客-註冊」，很nice，很人性化的命名。做爲在單一的首頁上使用，我是很難挑出什麼毛病來的。

可是，從道家「無」的哲學思想來看，語義實際上是對自身的一種束縛，越是語義強烈的命名越是沒有重用性（尤爲是內容語義的）。舉個實際點的例子，例如人人網的右側邊欄的標題：//zxx:通常找這類反例我就喜歡找人人網還有新浪，基本上一找一個準。人人網雖然外表長得跟facebook相似，可是就CSS而言，差距不是一兩個檔次的。

這個標題的class名是」side-item-header」，樣式以下圖所示：

如今一切ok，如今設想下，若是頁面中間的模塊有個標題，其樣式也是：

{padding:0 0 8px; text-align:right;}

那你發現前面已經有如出一轍的CSS樣式後，你會怎麼辦。把中間的標題也用」side-item-header」這個class嗎？這 裏」side」就是表示「邊」的意思，這就意味着這個樣式用在非側邊欄就是不合理的。你能作的估計即便新命名一個class，就像是」body- item-header」，明明是一樣的CSS屬性，結果卻不能重用（即便使用標識符組合並CSS，這裏的命名也是沒有重用的）。

可見命名不合理會大大限制你的CSS重用性。如何命名才能讓CSS發揮最大的重用性潛力呢？答案就是「面向屬性的命名」。 這種命名就是要讓你把頁面啊設計啊什麼的統統塞到馬桶裏沖走，不要管頁面什麼位置，什麼內容，there is noting, 這兒什麼都沒有，既然什麼都沒有，也就沒有了任何限制，因而CSS能夠自由出入於任何地方，無限重用，並且不用擔憂衝突，由於「面向屬性的命名」就是針對 自身屬性的一種命名方式，只會overwrite，不會衝突。

相比不少同行都用過這樣的命名方式，只是不夠系統，不夠大膽、完全，多淺嘗輒止，好比像是開心網，還有時光網的CSS代碼的前面一部分樣式命名：

我在「CSS樣式分離之再分離」一文中就展現過這種命名了，分離爲何可讓樣式的重用性放大至最大，就是由於分離後樣式的命名就是樣式自己。

就拿上面人人網的標題樣式舉例，人人網的作法是：

.side-item-header{padding:0 0 8px; text-align:right;}

要是我，我會對其進行分離。在實際項目時，text-align:right;這個屬性早就在CSS通用樣式庫裏面了，而padding:0 0 8px;則會以padding-bottom:8px;的形式放在網站通用樣式庫裏了（詳細請參見個人「我是如何對網站CSS進行架構的」一文）。最後，CSS命名與樣式會以下：

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

而這裏分離出來的樣式又能夠被其餘地方使用。是否是有點「吸星大法」的感受。

固然，若是網站自己的架構不是對每一個側欄內容進行模塊化處理的話，說實話，這裏標題的分離仍是有點危險的。想一想看，若是那天產品經理說底部 padding值要改爲10像素，啊哦，若是你的網站架構不合理，含這類標題的模塊處處塞，會改到你急火攻心，吐血三升而亡的。因此，對於分離，我反覆強 調，「千萬不要對網站通用的元素進行分離」。

因此，記住精簡高效的CSS命名準則之一：對於網站非通用元素，若是樣式簡單(1~2個屬性)，對其分離並使用面向屬性的命名方法。

4、精簡高效CSS命名之「三無原則」

此「三無原則」就是：無ID，無層級，無標籤

CSS命名就應該最簡單、最直接，直搗黃龍。沒有HTML標籤，沒有層級，這些統統滾蛋，不要。爲何不要，有三大緣由：
1. 限制重用
咱們會使用層級(#test .test)，會使用標籤(ul.test)，多是習慣(沒多想)，或是爲了不衝突。可是，我跟你說，從今之後，這種寫法讓他見鬼去吧（若是不是爲了 改變CSS優先級的話）。正如開篇論述的哲學觀點，你限制越多，越抑制了CSS的重用性。例如#test .test{}這種寫法，裏面的CSS重用性多大，徹底限死在了id爲test的元素下，哪有重用性可言；又如ul.test，我勒個去，這個ul標籤十 有八九就是裝飾用的，往這兒一放，一樣CSS樣式的div標籤能夠用嗎？哭爹喊娘，眼淚汪汪也無論用啊。因此，相信我，層級啊，標籤啊什麼的，統統見鬼去 吧。要知道，層級啊，標籤啊做用是什麼，是用來提升CSS優先級，把那個字母長的讓人發毛的」!important」幹掉的。

2. CSS文件大小
這瓜子雖小，吃多了也是能夠填飽肚子的。因此，你的CSS名稱不要像老太太的裹腳布同樣，搞得又臭又長，以下圖所示的人人網那個冗長的CSS命名吧：

你看名稱的字節數已經比屬性還大了，要是這些名稱都在15字符之內，乖乖，這個CSS文件能夠小個1~2K絕對沒有問題的。你看下圖這樣子的命名，這樣子的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樣式，如此複雜的三角關係，往後很差處理啊。

5、「三無原則」遺留之樣式衝突問題

正如上面講的，層級，標籤能夠避免樣式衝突，雖然「面向屬性的命名」不存在衝突問題，可是，頁面上不少樣式是沒法分離使用「面向屬性的命名」的，此時，一不能有層級，二不能有標籤，若是避免衝突呢？

首先，規範。項目組全部人的命名方法，習慣都要統一。其次，也是實際的作法，同一內容，使用同一前綴。就如上面的那張圖片所示，全部class同一使用od前綴，這樣，就毫不會與其餘頁面的CSS產生衝突了。

如今，還隱藏着一個會讓人心存疑惑的遺留問題。以下：

上圖中，不少個連接所有存放在一個標籤中，所有都是a標籤，按照個人「三無原則」，不能使用層級，那麼，我這裏的每一個a標籤都得附一 個.index_list_a{}這樣子的命名嗎，這樣子repeat下來，頁面HTML代碼豈不是很大，直接來個.index_list_box a{}，豈不是頁面HTML更加清爽。確實有理。實際上，按照我我的實踐的經驗，這類細小重複的列表元素的樣式都是比較簡單的，不要忘了，精簡高效的 CSS命名準則之一的「分離與面向屬性命名」，因此，對這裏的a標籤進行面向屬性的命名，權衡後期的重用性和HTML代碼開銷，仍是直接針對a標籤進行簡 單命名是最佳解決方案。

可是，不排除這類最內層標籤且重複元素的樣式會很複雜，此時，使用層級與標籤，或許是更好的作法，但這隻存在於一些很是特殊的狀況。對了，咱們看看點評網是如何對最內層且重複的a標籤進行處理的，以下圖：

點評網是使用的一個大寫的」B」做爲此樣式，不管這裏的」B」是有background之意，仍是邪惡的***之意，其命名比「面向屬性命名」更甚一籌，能夠說是接近真正意義上的nothing，後面能夠跟任意屬性，用在任意頁面，這就是「無」哲學，「無」的境界。//zxx:點評網的這個命名讓我聞到了一點Google的氣息

6、結語

如今，來個簡短的總結，精簡高效的CSS命名的關鍵字有「分離」，「統一前綴」，方法爲「面向屬性的命名」，準則爲「無層級、無標籤」。其中，「分 離」是「面向屬性命名」的基礎。「面向屬性命名」和「無層級、無標籤」屬於兩個不一樣的系列，一個針對短命名屬性，一個針對長命名屬性。可是，兩個又互相依 存。沒有「面向屬性命名」，「無層級、無標籤」命名最後是以不堪重負，HTML膨脹致死結局。而僅僅是「面向屬性命名」，前端開發人員會因維護過勞噴血而 死。總之，二者缺一不可。

上述全部內容，都是根據本身的開發總結出來的東西，我的觀點，經驗之談。每一個人的成長不一樣，工做環境不一樣，必然在看到一些問題上會有差別，歡迎交流與討論。我資歷尚淺，文中不免會有不許確的地方，歡迎指正。

個人這套準則是創建在本身的一套CSS架構上的，我本身用的是很是開心的，並且效果很是明顯。可是，究竟是否適用於其餘同行，我不能保證，畢竟優秀 的前端人員心中都有本身的那一套準則。個人我的建議是這樣的，若是您仍是個CSS新手，或者對我文中提到的一些概念不太理解，我以爲全搬過來不太合適。您 能夠保留您以前那種一步一趨的寫法，而後在這基礎上作您肯定的改進。若是真能對您CSS的學習提供一些幫助與啓示，那真是再好不過了。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1098