前端ClassName命名規(guī)范

ClassName 的命名應(yīng)該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統(tǒng)一使用下劃線 “_” 連接

命名原則

基于姓氏命名法（繼承 + 外來），祖先模塊不能出現(xiàn)下劃線，除了是全站公用模塊，如 mod_ 系列的命名：

推薦：

<div class="modulename">
	<div class="modulename_info">
		<div class="modulename_son"></div>
		<div class="modulename_son"></div>
		...
	</div>
</div>
	
<!-- 這個(gè)是全站公用模塊，祖先模塊允許直接出現(xiàn)下劃線 -->
<div class="mod_info">
	<div class="mod_info_son"></div>
	<div class="mod_info_son"></div>
	...		
</div>

不推薦：

<div class="modulename_info">
	<div class="modulename_info_son"></div>
	<div class="modulename_info_son"></div>
	...		
</div>

在子孫模塊數(shù)量可預(yù)測(cè)的情況下，嚴(yán)格繼承祖先模塊的命名前綴

<div class="modulename">
	<div class="modulename_cover"></div>
	<div class="modulename_info"></div>
</div>

當(dāng)子孫模塊超過 4級(jí)或以上的時(shí)候，可以考慮在祖先模塊內(nèi)具有識(shí)辨性的獨(dú)立縮寫作為新的子孫模塊

推薦：

<div class="modulename">
	<div class="modulename_cover"></div>
	<div class="modulename_info">
    	<div class="modulename_info_user">
    		<div class="modulename_info_user_img">
    			<img src="" alt="">
    			<!-- 這個(gè)時(shí)候 miui 為 modulename_info_user_img 首字母縮寫-->
    			<div class="miui_tit"></div>
    			<div class="miui_txt"></div>
    			...
    		</div>
    	</div>
    	<div class="modulename_info_list"></div>
	</div>
</div>

不推薦：

<div class="modulename">
	<div class="modulename_cover"></div>
	<div class="modulename_info">
    	<div class="modulename_info_user">
    		<div class="modulename_info_user_img">
    			<img src="" alt="">
    			<div class="modulename_info_user_img_tit"></div>
    			<div class="modulename_info_user_img_txt"></div>
    			...
    		</div>
    	</div>
    	<div class="modulename_info_list"></div>
	</div>
</div>

模塊命名

全站公共模塊：以 ?mod_? 開頭

<div class="mod_yours"></div>

業(yè)務(wù)公共模塊：以 業(yè)務(wù)名?_mod_? 開頭

<div class="paipai_mod_yours"></div>

常用命名推薦

注意：?ad?、?banner?、?gg?、?guanggao? 等有機(jī)會(huì)和廣告掛勾的字眠不建議直接用來做 ClassName，因?yàn)橛行g覽器插件（Chrome 的廣告攔截插件等）會(huì)直接過濾這些類名，因此

<div class="ad"></div>

這種廣告的英文或拼音類名不應(yīng)該出現(xiàn)

另外，敏感不和諧字眼也不應(yīng)該出現(xiàn)，如：

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div> 
<div class="ass"></div> 
<div class="KMT"></div> 
...