HTML CSS代码规范

google html css编码规范

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

bootstrap 编码规范

http://codeguide.bootcss.com/

HTML class id 命名经验

相关规范

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.命名太长可适当简化

推荐: <div class="carousel-ct">

不太推荐: <div class="carousel-container">

5.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)

推荐：<div class="text-lesser"></div>

不推荐： <div class="light-grey"></div>

命名经验

1. wrap -- 用于外侧包裹
2. header或者 head -- 用于头部
3. main -- 用于主体
4. container或 ct -- 包裹容器
5. aside -- 用于侧边栏
6. nav -- 用于导航条
7. tab -- 用于Tab切换选项卡
8. content -- 和header footer 对应，用于主要内容
9. footer或者foot -- 用于尾部
10. ad -- 广告
11. subnav -- 二级导航
12. menu -- 菜单
13. tag -- 标签
14. message或者notice -- 提示消息
15. summary -- 摘要
16. logo -- logo
17. search -- 搜索框
18. login -- 登录
19. register -- 注册
20. username -- 用户名
21. password -- 密码
22. dropmenu -- 下拉菜单
23. banner -- 广告条
24. copyright -- 版权
25. modal或者 dialog -- 弹窗
26. tooltip -- 鼠标放置上去的提示

上面是一些约定俗成的命名。虽然没有统一定论，但可记住下面的经验：

1. 命名是功能的描述，如果不知道如何命名，把你能想到的中文名字翻译成看着最顺眼的英文
2. 对于功能复杂的命名，可使用"是什么-什么特性"的命名方式，如"text-lesser"代表样式地位更轻一点的文本，"dialog-open"代表打开了的弹窗
3. 可充分利用语意化标签，配合直接子元素选择器去定位元素，省去一部分元素的命名

如:

    <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元素的命名