语义化
- 优先使用语义化标签
- 基于功能命名、基于内容命名、基于表现命名
- 命名
- 所有命名都采用小写
- 命名用引号包裹
- 用中横线连接
- 名称体现功能，而不是表现样式，如：颜色、背景等
HTML规范
- 用两个空格代表一个制表符，保证在所有环境下表现一致，嵌套元素应当用四个空格进行缩进
- 使用双引号对属性进行定义
- 不要给自闭合标签添加斜线
- 为HTML文档添加标准模式的声明
- 通过meta标签确定绘制页面所采用的IE版本
- 为避免乱码，声明文档的字符编码，一般是utf-8
- 引入css文件和js文件时不需要声明type属性，默认值即是它们自己
- 尽量使用最少的标签并保持最小的复杂度
- 声明属性时的顺序为class、id\name、src\for\type\href\value、title\alt
CSS规范
字符编码格式采用“utf-8”，与HTML文档保持一致
tab 用两个空格代替
: 后加个空格， { 前加个空格
每条声明后都加上分号
选择器分组时，将单独的选择器单独放在一行，而不是放到一行
为了获得准确的报错，应该将每条声明占据一行
避免为0值指定单位
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
尽量缩写， 如：padding: 5px 10px 5px 10px -> margin: 5px 10px
声明顺序应该是position/ box model/ typographic/ visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。完整参考-
不要使用@import
与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：- 使用多个 <link> 元素
- 通过 Sass 或 Less 类似的 CSS 预处理器
将多个 CSS 文件编译为一个文件 - 通过 Rails、Jekyll 或其他系统中提供过
CSS 文件合并功能
【参考资料-Bootstrap中文网】
【参考资料-Google HTML CSS编码规范】
【参考资料-命名这货真难】
【参考资料-百度】
