Menu

CSS ClassName 的長命名 VS. 短命名

源自2009.11.26懶懶交流會的PK堂,收穫甚多,故作此記。

PPT鏈接

說實話,看到這個題目時我覺得這有什麼好討論的,肯定會是場一邊倒的討論。因為個人比較傾向於短命名,簡單優雅,可能是出於程序員的潔癖,容不得任何冗餘的東西。(和我一個想法的人應該不在少數吧

 

====

先看下長命名和短命名的定義:













====

會上大家先是給雙方各列了一堆優缺點,結果不相上下。

然後從性能和可維護性上進行了詳細的爭論。

性能分為下載性能(速度)和渲染性能,大家認為:

  1. 下載性能可能是短命名略勝一籌,因為文件會稍小些;
  2. 渲染性能則是長命名好些,因為CSS中通常短命名我們用類似.box .hd {}定義樣式,而長命名直接是.box-hd {},pagespeed認為選擇器長度會影響渲染性能。

(註:其實平時工作中這兩點都會被忽略。gzip可以進一步減少第一個問題的差距,而由此引發的渲染性能也是微乎其微)

然後大家就可維護性進行了討論,這次支持長命名的人較多。

  1. 長命名給人較為可靠的感覺;
  2. 長命名較短命名發生衝突的幾率低很多;
  3. 可復用的內容通過短命名定義,無可爭議;

最後是使用場景,玉伯借用YAHOO首頁的例子牽頭,大家討論,總結如下:(主要依據可維護性)

  1. 1. 框架級樣式用短命名,比如盒模型、柵格;
  2. 2. 通用樣式用短命名,比如.hidden、.clearfix;
  3. 3. 應用級樣式用長命名,比如淘江湖項目的通用樣式都加上「sns」前綴(有.sns-avatar、.sns-box等);
  4. 4. 頁面級樣式用長命名,比如類目模塊,可能包含category-hd、category-bd、category-bd-tips等;
  5. 5. 嵌入式應用用長命名,因為可能會被嵌入到任何複雜環境中,比如開源編輯器、Google的各種應用(map, adsence, gmail…)

以上結論有個前提:就是頁面是多人(包括後期的維護人員)協作的,一個人的頁面(如Blog)不在考慮範圍之內。

====

歡迎補充指正。