前端ClassName命名規(guī)范

2020-09-09 16:33 更新

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>
...
ClassName 含義
about 關(guān)于
account 賬戶
arrow 箭頭圖標(biāo)
article 文章
aside 邊欄
audio 音頻
avatar 頭像
bg,background 背景
bar 欄(工具類)
branding 品牌化
crumb,breadcrumbs 面包屑
btn,button 按鈕
caption 標(biāo)題,說明
category 分類
chart 圖表
clearfix 清除浮動(dòng)
close 關(guān)閉
col,column
comment 評(píng)論
community 社區(qū)
container 容器
content 內(nèi)容
copyright 版權(quán)
current 當(dāng)前態(tài),選中態(tài)
default 默認(rèn)
description 描述
details 細(xì)節(jié)
disabled 不可用
entry 文章,博文
error 錯(cuò)誤
even 偶數(shù),常用于多行列表或表格中
fail 失敗(提示)
feature 專題
fewer 收起
field 用于表單的輸入?yún)^(qū)域
figure
filter 篩選
first 第一個(gè),常用于列表中
footer 頁腳
forum 論壇
gallery 畫廊
group 模塊,清除浮動(dòng)
header 頁頭
help 幫助
hide 隱藏
hightlight 高亮
home 主頁
icon 圖標(biāo)
info,information 信息
last 最后一個(gè),常用于列表中
links 鏈接
login 登錄
logout 退出
logo 標(biāo)志
main 主體
menu 菜單
meta 作者、更新時(shí)間等信息欄,一般位于標(biāo)題之下
module 模塊
more 更多(展開)
msg,message 消息
nav,navigation 導(dǎo)航
next 下一頁
nub 小塊
odd 奇數(shù),常用于多行列表或表格中
off 鼠標(biāo)離開
on 鼠標(biāo)移過
output 輸出
pagination 分頁
pop,popup 彈窗
preview 預(yù)覽
previous 上一頁
primary 主要
progress 進(jìn)度條
promotion 促銷
rcommd,recommendations 推薦
reg,register 注冊(cè)
save 保存
search 搜索
secondary 次要
section 區(qū)塊
selected 已選
share 分享
show 顯示
sidebar 邊欄,側(cè)欄
slide 幻燈片,圖片切換
sort 排序
sub 次級(jí)的,子級(jí)的
submit 提交
subscribe 訂閱
subtitle 副標(biāo)題
success 成功(提示)
summary 摘要
tab 標(biāo)簽頁
table 表格
txt,text 文本
thumbnail 縮略圖
time 時(shí)間
tips 提示
title 標(biāo)題
video 視頻
wrap 容器,包,一般用于最外層
wrapper 容器,包,一般用于最外層


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)