前端ClassName命名規(guī)范

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

命名原則

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

推薦：

<div class="modulename">
	<div class="modulename_info">
		<div class="modulename_son"></div>
		<div class="modulename_son"></div>
		...
	</div>
</div>
	
<!-- 這個是全站公用模塊，祖先模塊允許直接出現(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ù)量可預測的情況下，嚴格繼承祖先模塊的命名前綴

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

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

推薦：

<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="">
    			<!-- 這個時候 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è)務公共模塊：以 業(yè)務名?_mod_? 開頭

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

常用命名推薦

注意：?ad?、?banner?、?gg?、?guanggao? 等有機會和廣告掛勾的字眠不建議直接用來做 ClassName，因為有些瀏覽器插件（Chrome 的廣告攔截插件等）會直接過濾這些類名，因此

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

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

另外，敏感不和諧字眼也不應該出現(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> 
...