html/css 编码规范

之前写html页面都是奔着功能去的，只要能实现效果，不管代码写的怎么样。这就导致代码的可维护性，扩展性和复用性都很差，无以规矩不成方圆，先规范下自己的编码规范。

html/css规范：
1. 每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进，标准缩进两个空格。
2. 一律使用小写字母。
3. 语义化，根据html各个元素设计的初衷去使用它们，如h1-6用于标题p用于段落a用于链接。
4. 多媒体内容提供后备方案 alt=xxx
5. html js css的分离，并尽量将css js 合并到一个文件中
6. html属性顺序class、id name、data-*、src for type href、title alt、aria- role
7. 通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
8. 使用简写可以提高代码执行效率和易读性。
9. 使用 rem 作为字号、长度单位rem详解
10.不要添加浏览器厂商前缀，使用 Autoprefixer 自动添加浏览器厂商前缀
11. 样式编写顺序：Positioning、Box model、Typographic、Visual

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

命名注意事项

语义化，望文见义
如 am-tab、am-nav，不要使用 red、left 等表象的词命名。

模块状态： {命名空间}-{模块名}-{状态描述}
常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等

子模块： {命名空间}-{模块名}-{子模块名}
常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 词义表达组件要实现的功能。