google html css編碼規(guī)范

https://google.github.io/styleguide/htmlcssguide.xml

bootstrap 編碼規(guī)范

http://codeguide.bootcss.com/

HTML class id 命名經(jīng)驗

相關(guān)規(guī)范

1.所有命名都使用英文小寫

推薦：<div class="main"></div>

不推薦： <div class="Main"></div>

2.命名用引號包裹

推薦：<div id="header"></div>

不推薦： <div id=header></div>

3.用中橫線連接

推薦：<div class="mod-modal"></div>

不推薦： <div class="modModal"></div>

4.命名太長可適當(dāng)簡化

推薦: <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)驗

1. wrap -- 用于外側(cè)包裹
2. header或者 head -- 用于頭部
3. main -- 用于主體
4. container或 ct -- 包裹容器
5. aside -- 用于側(cè)邊欄
6. nav -- 用于導(dǎo)航條
7. tab -- 用于Tab切換選項卡
8. content -- 和header footer 對應(yīng)，用于主要內(nèi)容
9. footer或者foot -- 用于尾部
10. ad -- 廣告
11. subnav -- 二級導(dǎo)航
12. menu -- 菜單
13. tag -- 標(biāo)簽
14. message或者notice -- 提示消息
15. summary -- 摘要
16. logo -- logo
17. search -- 搜索框
18. login -- 登錄
19. register -- 注冊
20. username -- 用戶名
21. password -- 密碼
22. dropmenu -- 下拉菜單
23. banner -- 廣告條
24. copyright -- 版權(quán)
25. modal或者 dialog -- 彈窗
26. tooltip -- 鼠標(biāo)放置上去的提示

上面是一些約定俗成的命名。雖然沒有統(tǒng)一定論，但可記住下面的經(jīng)驗：

1. 命名是功能的描述，如果不知道如何命名，把你能想到的中文名字翻譯成看著最順眼的英文
2. 對于功能復(fù)雜的命名，可使用"是什么-什么特性"的命名方式，如"text-lesser"代表樣式地位更輕一點的文本，"dialog-open"代表打開了的彈窗
3. 可充分利用語意化標(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元素的命名