武林網(www.49028c.com)文章簡介：CSS的命名在webjx.com中，曾經多次討論過。說實話，看到這個題目時我覺得這有什么好討論的，肯定會是場一邊倒的討論。因為個人比較傾向于短命名，簡單優雅，可能是出于程序員的潔癖，容不得任何冗余的東西。

　CSS的命名在webjx.com中，曾經多次討論過。說實話，看到這個題目時我覺得這有什么好討論的，肯定會是場一邊倒的討論。因為個人比較傾向于短命名，簡單優雅，可能是出于程序員的潔癖，容不得任何冗余的東西。和我一個想法的人應該不在少數吧！

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

<!-- 長命名：使用前綴體現上下文環境的CSS命名方式。 -->
<div class="category">
        <div class="category-hd"></div>
        <div class="category-bd"></div>
        <div class="category-ft"></div>
</div>
<!-- 短命名：使用繼承體現上下文環境的CSS命名方式。 -->
<div class="category">
        <div class="hd"></div>
        <div class="bd"></div>
        <div class="ft"></div>
</div>

　　大家先是給雙方各列了一堆優缺點，結果不相上下。然后從性能和可維護性上進行了詳細的爭論。
　　性能分為下載性能(速度)和渲染性能，大家認為：
　　1. 下載性能可能是短命名略勝一籌，因為文件會稍小些；
　　2. 渲染性能則是長命名好些，因為CSS中通常短命名我們用類似.box .hd {}定義樣式，而長命名直接是.box-hd {}，pagespeed認為選擇器長度會影響渲染性能。
　　注：其實平時工作中這兩點都會被忽略。gzip可以進一步減少第一個問題的差距，而由此引發的渲染性能也是微乎其微。

　　然后大家就可維護性進行了討論，這次支持長命名的人較多。
　　1. 長命名給人較為可靠的感覺；
　　2. 長命名較短命名發生沖突的幾率低很多；
　　3. 可復用的內容通過短命名定義，無可爭議；
　　…
　　最后是使用場景，玉伯借用YAHOO首頁的例子牽頭，大家討論，總結如下：(主要依據可維護性)
　　1. 框架級樣式用短命名，比如盒模型、柵格；
　　2. 通用樣式用短命名，比如.hidden、.clearfix；
　　3. 應用級樣式用長命名，比如淘江湖項目的通用樣式都加上“sns”前綴(有.sns-avatar、.sns-box等)；
　　4. 頁面級樣式用長命名，比如類目模塊，可能包含category-hd、category-bd、category-bd-tips等；
　　5. 嵌入式應用用長命名，因為可能會被嵌入到任何復雜環境中，比如開源編輯器、Google的各種應用(map, adsence, gmail…)
　　以上結論有個前提：就是頁面是多人(包括后期的維護人員)協作的，一個人的頁面(如Blog)不在考慮范圍之內。