CSS研究教程-類名的長命名和短命名

2020-03-24 16:56:38

字體：大中小

供稿：網(wǎng)友

說實話，看到這個題目時我覺得這有什么好討論的，肯定會是場一邊倒的討論。因為個人比較傾向于短命名，簡單優(yōu)雅，可能是出于程序員的潔癖，容不得任何冗余的東西。（和我一個想法的人應(yīng)該不在少數(shù)吧！）先看下長命名和短命名的定義：
==== 會上大家先是給雙方各列了一堆優(yōu)缺點，結(jié)果不相上下。然后從性能和可維護(hù)性上進(jìn)行了詳細(xì)的爭論。性能分為下載性能(速度)和渲染性能，大家認(rèn)為： 1. 下載性能可能是短命名略勝一籌，因為文件會稍小些；
2. 渲染性能則是長命名好些，因為CSS中通常短命名我們用類似.box .hd {}定義樣式，而長命名直接是.box-hd {}，pagespeed認(rèn)為選擇器長度會影響渲染性能。
(注：其實平時工作中這兩點都會被忽略。gzip可以進(jìn)一步減少第一個問題的差距，而由此引發(fā)的渲染性能也是微乎其微) 然后大家就可維護(hù)性進(jìn)行了討論，這次支持長命名的人較多。 1. 長命名給人較為可靠的感覺；
2. 長命名較短命名發(fā)生沖突的幾率低很多；
3. 可復(fù)用的內(nèi)容通過短命名定義，無可爭議；
…
最后是使用場景，玉伯借用YAHOO首頁的例子牽頭，大家討論，總結(jié)如下：(主要依據(jù)可維護(hù)性) 1. 框架級樣式用短命名，比如盒模型、柵格；
2. 通用樣式用短命名，比如.hidden、.clearfix；
3. 應(yīng)用級樣式用長命名，比如淘江湖項目的通用樣式都加上“sns”前綴(有.sns-avatar、.sns-box等)；
4. 頁面級樣式用長命名，比如類目模塊，可能包含category-hd、category-bd、category-bd-tips等；
5. 嵌入式應(yīng)用用長命名，因為可能會被嵌入到任何復(fù)雜環(huán)境中，比如開源編輯器、Google的各種應(yīng)用(map, adsence, gmail…)
以上結(jié)論有個前提：就是頁面是多人(包括后期的維護(hù)人員)協(xié)作的，一個人的頁面(如Blog)不在考慮范圍之內(nèi)。 ==== 歡迎補(bǔ)充指正。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS屬性Vertical Align使用方法

下一篇：CSS簡化網(wǎng)頁設(shè)計與維護(hù)