编码规范

语义化

• 优先使用语义化标签
• 基于功能命名、基于内容命名、基于表现命名
• 命名
  • 所有命名都采用小写
  • 命名用引号包裹
  • 用中横线连接
  • 名称体现功能，而不是表现样式，如：颜色、背景等

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编码规范】
    【参考资料-命名这货真难】
    【参考资料-百度】