google html css编码规范
https://google.github.io/styleguide/htmlcssguide.xml
bootstrap 编码规范
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>
命名经验
-
wrap-- 用于外侧包裹 -
header或者head-- 用于头部 -
main-- 用于主体 -
container或ct-- 包裹容器 -
aside-- 用于侧边栏 -
nav-- 用于导航条 -
tab-- 用于Tab切换选项卡 -
content-- 和header footer 对应，用于主要内容 -
footer或者foot-- 用于尾部 -
ad-- 广告 -
subnav-- 二级导航 -
menu-- 菜单 -
tag-- 标签 -
message或者notice-- 提示消息 -
summary-- 摘要 -
logo-- logo -
search-- 搜索框 -
login-- 登录 -
register-- 注册 -
username-- 用户名 -
password-- 密码 -
dropmenu-- 下拉菜单 -
banner-- 广告条 -
copyright-- 版权 -
modal或者dialog-- 弹窗 -
tooltip-- 鼠标放置上去的提示
上面是一些约定俗成的命名。虽然没有统一定论，但可记住下面的经验：
- 命名是功能的描述，如果不知道如何命名，把你能想到的中文名字翻译成看着最顺眼的英文
- 对于功能复杂的命名，可使用"是什么-什么特性"的命名方式，如"text-lesser"代表样式地位更轻一点的文本，"dialog-open"代表打开了的弹窗
- 可充分利用语意化标签，配合直接子元素选择器去定位元素，省去一部分元素的命名
如:
<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元素的命名
