知乎網的CSS命名規律研究

　　筆者是一名Java程序員，前端css和圖片本不是個人工做，亦不是個人強項。但不少時候，公司並無合適的美工，只有本身動手。通常的css技術，卻是沒有問題，定位，盒子，浮動，佈局等等，都能作。但往往完成，本身審視一遍，總有一種零零散散的感受，可維護性不好。究其緣由，發現更多的是命名的問題。命名隨意任性，前期規劃不詳細，後期改動多，致使class可讀性差，重用性更差。就像下面：

 

壓根就看不懂這些元素大概是什麼意思。語義性差。這裏的hd,bd，別的地方彷佛也可使用。

         所以，筆者決心研究一下大網站的作法。這裏不是制訂規範，只是介紹大網站的命名規律，探索其命名方法。本篇介紹知乎網的樣式命名規律。

知乎網（zhihu.com）界面簡潔，功能簡單，沒有廣告。這是訪客但願看到的。這裏咱們不討論其頁面的設計，不考慮其js的編寫。只談class的命名，主要關注層級元素的命名。這裏考慮未登陸狀態，咱們討論三個模塊：頂部，主內容區，側邊。

一．頂部zu-top

頂部很普通，咱們要學習的就是普通結構。

 

要是我本身按照這個設計寫css寫結構，通常是5個div，而後每一個div分別寫。咱們看知乎網的寫法：

 

整個模塊class=zu-top，我分析，無非是網站的名字，zhihu，zh容易混淆，因此改成zu，不易重複，而後使用中短號鏈接，這個規律一直貫穿整個網站，而且所有使用小寫。那麼網站的頂部，最外層即命名爲：zu-top，zu是本站的自然標籤，top是語義化的標籤。

         接下來是class=zg-wrap modal-shifting，這裏表達top的第一個子元素。這裏的命名彷佛沒有規律，沒有zu標籤了。其實否則，zg這個詞，應該是zhihu,global的首字母縮寫，表示全網通用。後面的發現也證明了這一點，zg-wrap，後面也經常使用，做用就是規定內容的外圍寬度，水平居中。至於modal-shifting，我也不知道，多是其開發者內部約定，彷佛與彈出層有關。

         組成頭部主體的是四個部分，所有采用浮動的寫法，這樣的好處有三個，一是瀏覽器兼容性好；二是減小元素的層級，好比第一個子元素直接使用a標籤；三是浮動配合display:block使用達到實現任意元素行顯示塊效果的元素無關性，就是任意元素都能按照行的規則，顯示塊級元素的效果。再看命名規則。

         第一個是a連接，就是logo圖片。延續了父級元素的名稱，zu-top-link-logo，前面是父元素的class，這個很容易理解，這樣也不容易重複。

         第二個是主搜索框，class=zu-top-search，也容易理解。咱們來仔細剖析裏面的命名。

 

裏面的form元素的classs是zu-top-search-form form-with-magnify，仍然延續了父級元素的名稱。而form-with-magnify僅僅是功能性的，表示該表單帶有放大鏡搜索。form中的input標籤，class=zu-top-search-input。按理應該是zu-top-search-form-input，估計開發者在這裏又遵照一個原則，元素內部結構簡單，語義明朗的狀況下，子元素class名稱能夠不攜帶直接父級的特性名稱。這就像生活中的規律，不嚴謹，但合理。

         可是最後一個提問按鈕的button頗讓人費解。class=zu-top-add-question。這裏沒有遵循父級元素的繼承性。這裏，能夠說知乎網開發的不夠嚴謹。既然將提問按鈕做爲搜索框的子元素，就應該命名爲zu-top-search-add-question。如今的zu-top-add-question的名稱，儼然是將提問按鈕做爲與搜索框並列的元素對待。我猜測是開發者的一個困惑，應該從語義上或者頁面設計上來講，提問按鈕的確不隸屬搜索框，可是寫成這種層級的html結構又是如此簡單。因此這個提問按鈕的class命名，咱們姑且認爲，做者有時會考慮元素自己的語義性或者說設計屬性。

         第三個是導航條。

 

導航條的命名，同上面一模一樣，遵照攜帶父元素的特質名稱。ul，li,能夠認爲不是特質的，不是語義的，可是裏面的a連接的class=zu-top-nav-link，依然是繼承父類命名的。

         第四個是登錄註冊板塊。

這個板塊毫無規律可言。估計是設計的時候，沒有考慮這麼仔細，當初，知乎是邀請註冊的，可能沒有這些按鈕，再加上的時候，程序員換人了，明顯的能看出命名風格有很大不一樣，topnav-noauth，即便沒有按照父級命名規則，也應該寫成帶有短號的方式top-nav-noauth。裏面的icon，zg-icon-dd-home，這個dd很是讓人不解。此處姑且算特例。可是裏面的zg-icon，應該是通用的全局class。

         經過對頂部元素的分析，咱們容易總結，知乎的命名，採用小寫單詞，中短號鏈接的方式a-b-c-d，子元素繼承父元素，子元素名稱加長。但不是嚴格按照html中定義的包裹層級，有時亦遵循語義層級。就像阿拉伯人或俄羅斯人取名，本·拉登的全名是：奧薩馬·本·穆罕默德·本·阿瓦德·本·拉登，阿拉伯人名稱組成，本名+父名+祖父名+姓。因此拉登的真名是奧薩馬，拉登只是姓。中間不少本的含義是某人之子，指環王中的son of。他們的名字不怕長，可是他們的身份證不重名。

         知乎網的這種規則一直貫穿整個網站，這種方式雖然冗長，可是有利於團隊開發，是值得學習的。可是內部結構很是深的時候，命名會很是長，長達7，8個單詞，怎麼辦，知乎網採用了合併首字母的辦法。請看下面的分析。

        

二．主內容區zu-main-content

主內容區的結構和命名是知乎網的精髓。

 

網站的主體內容div實際上是class=zg-wrap zu-main question-page，包括了頂部，腳部以外的全部可見區域，這裏的zg-wrap和上面的是重用的。zu-main同zu-top並列，定義了頂級的父元素。這裏我以爲要說一點，就是main，content，wrap，panel等單詞的含義，我本身常常混用。main應該指定一個區域，主區域；content應該也是指定一個區域，僅僅是內容區域；wrap指包裹區域，可大可小，是對一個元素的包裹，通常是對寬度的指定；panel指面板，處處均可以使用。前面兩個單詞用於佈局，最好用於全局，後面兩個單詞可與其餘單詞組合，用在任意處。zu-main的總體結構以下：

 

很容易看出，zu-main只有兩個子元素content，sidebar，典型的左右佈局。下面仔細分析content部分。圖片以下：

 

這裏，咱們發現了一些變更。在實體的元素中，第一個子元素，tag編輯元素，class=zm-tag-editor  zg-section，這裏的zg-section很容易理解，即：zhihu-global-section，至關於zg-wrap，也是全局的，明肯定義一個塊元素，的確也發現：zg-section{display:block}，只有這麼多。而zm-tag-editor顯然是zu-main-tag-editor的縮寫。目的是爲了避免讓class太長。後面的zm-item-rich-text，zm-tiem-meta都有這個特徵。

         後面的問題詳情板塊，class=zh-question-answer-wrapper，我不是很理解，爲何忽然改變了命名風格。該div有衆多的並列子元素zm-item-answer，表示問題的回答。這個父元素爲何不命名爲zm-question-answer-wrapper？

         下面來具體分析下一個回答的內部命名：

 

做爲一個具體的板塊，zm-item-answer的子元素，並無按照阿拉伯人的方式命名。支持與反對直接寫成zm-votebar，答案頭部居然寫成answer-head，看起來這個寫法毫無道理。爲何這裏沒有繼續遵循阿拉伯人的方式呢，我猜測，由於答案板塊裏面的內容很是業務化，像votebar，answer，這些單詞不容易在全頁面的其餘地方出現，因此加上冗長的前綴做爲命名空間，已經沒有必要了。

         後面一個元素zm-item-meta，出現了單詞meta，表示下面的都是元數據，都是基礎數據。這個詞用的比較恰當。class=meta-item表示了共性，class=zu-autohide明顯是全頁面共享的，前面咱們知道，zu表示全頁面，這樣寫法的好處是，一句js代碼，即讓頁面中符合自動隱藏，鼠標劃上則顯示的全部元素得以效果。如：

$([class*=autohide]).hover(function(),function());

能夠看到，知乎網採用了class按照功能分割疊加的寫法，這是css指南提倡的。

從主內容區的寫法中，咱們大概能夠看出，在比較外圍的元素上，知乎網依然遵循繼承父元素名稱的阿拉伯人命名法。一旦板塊的內容變得嵌入更深，更加業務化，變得更緊湊，變得更小時，他們採起了更簡潔的寫法，直接使用諸如zm-ABC的不易重發的寫法。而zg開頭的全局class像一個約定，一直貫穿全頁面。

三．側邊欄zu-main-sidebar

相比前面的板塊，側邊欄簡單多了。

 

內容不多，元素簡單。css的命名也比較簡潔。看圖：

 

父元素zu-main-sidebar定義了惟一的命名空間。而裏面的子元素，又定義了zm-side-section，其實應該寫成zm-sidebar-section更加嚴謹。固然，side通常是專指側邊欄，也容易理解。這裏咱們也看到了最後一個元素zg-clear，就是清初父級浮動的，像咱們寫的clearfix，不過他們繼承了zg寫法的傳統。再看看裏面具體的寫法：

 

具體的裏面zm-side-setion-inner依然是阿拉伯人命名方法，其子元素login-reg-box well我就不明白了，按理說box至關於panel，大概是盒子，面板的意思，應該命名爲zm-side-section-innner-box，若是是後面共用的，應該是zg-login-reg-box。裏面具體的按鈕，一看就是全頁面共用的，zg-btn-green，zg-btn-red，再配上具體的class，能夠創造任意高寬的按鈕。

四.結語

         總體來講，知乎網的css命名是很是優秀的，開發維護過程應該是愉快高效的。總結出來，他們大概遵循瞭如下的幾個原則。

1. 主體繼承父級。主體採用阿拉伯人取名的方法。zu-a-b-c，最長沒有超過5個單詞。這樣能夠劃分幾個大的命名空間。寫子元素class的時候，只須要.zu-a-b-c .d，而無需過長的引用幾層父類，提升了css的渲染效率。這點是整個頁面佈局的關鍵，是最值得學習的。筆者姑且稱爲阿拉伯命名法。
2. 深層以業務名爲主。深層次的元素，再也不使用阿拉伯人的方法，而依靠具體的業務名，這些業務大多不易重複，可是也套上大板塊的名稱，如zm-business。這點是符合簡潔規則的，但須要必定的理解能力。
3. 全局樣式命名清晰。全局使用的共用的class，採用了統一的zg-開頭的寫法，有利於保證代碼的整潔。咱們發現，zg-開頭的css，樣式最好是基礎性的，固定的。這點也值得學習。

 

　　本文很囉嗦，但前端的東西就是囉嗦出來的。作互聯網本着拿來主義的精神，多研究提升我的水平吧。再次說明，本拉登身份證上的名字是：

　　奧薩馬·本·穆罕默德·本·阿瓦德·本·拉登

                            　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　方勁鬆於信豐物流公司 東莞虎門北柵西坊工業區

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2015.07.28