google html css編碼規(guī)范
https://google.github.io/styleguide/htmlcssguide.xml
bootstrap 編碼規(guī)范
HTML class id 命名經(jīng)驗(yàn)
相關(guān)規(guī)范
1.所有命名都使用英文小寫(xiě)
推薦：<div class="main"></div>
不推薦： <div class="Main"></div>
2.命名用引號(hào)包裹
推薦：<div id="header"></div>
不推薦： <div id=header></div>
3.用中橫線連接
推薦：<div class="mod-modal"></div>
不推薦： <div class="modModal"></div>
4.命名太長(zhǎng)可適當(dāng)簡(jiǎn)化
推薦: <div class="carousel-ct">
不太推薦: <div class="carousel-container">
5.命名體現(xiàn)功能，不涉及表現(xiàn)樣式(顏色、字體、邊框积糯、背景等)
推薦：<div class="text-lesser"></div>
不推薦： <div class="light-grey"></div>
命名經(jīng)驗(yàn)
-
wrap-- 用于外側(cè)包裹 -
header或者head-- 用于頭部 -
main-- 用于主體 -
container或ct-- 包裹容器 -
aside-- 用于側(cè)邊欄 -
nav-- 用于導(dǎo)航條 -
tab-- 用于Tab切換選項(xiàng)卡 -
content-- 和header footer 對(duì)應(yīng)，用于主要內(nèi)容 -
footer或者foot-- 用于尾部 -
ad-- 廣告 -
subnav-- 二級(jí)導(dǎo)航 -
menu-- 菜單 -
tag-- 標(biāo)簽 -
message或者notice-- 提示消息 -
summary-- 摘要 -
logo-- logo -
search-- 搜索框 -
login-- 登錄 -
register-- 注冊(cè) -
username-- 用戶名 -
password-- 密碼 -
dropmenu-- 下拉菜單 -
banner-- 廣告條 -
copyright-- 版權(quán) -
modal或者dialog-- 彈窗 -
tooltip-- 鼠標(biāo)放置上去的提示
上面是一些約定俗成的命名纪岁。雖然沒(méi)有統(tǒng)一定論与柑，但可記住下面的經(jīng)驗(yàn)：
- 命名是功能的描述近范，如果不知道如何命名催束，把你能想到的中文名字翻譯成看著最順眼的英文
- 對(duì)于功能復(fù)雜的命名集峦，可使用"是什么-什么特性"的命名方式伏社，如"text-lesser"代表樣式地位更輕一點(diǎn)的文本抠刺，"dialog-open"代表打開(kāi)了的彈窗
- 可充分利用語(yǔ)意化標(biāo)簽，配合直接子元素選擇器去定位元素摘昌，省去一部分元素的命名
如:
<div class="tab>
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="panels">
<li></li>
<li></li>
<li></li>
</ul>
</div>
.tab .nav > li {
}
.tab .panels > li{
}
可省去li元素的命名
