编码规范

命名

• 命名体现功能，或体现内容，不涉及具体样式。（命名涉及样式不利于维护)
• 用引号包裹命名。
• 使用英文小写。
• 单一命名用中横线连接。

能用标签不用命名

范例：

<!-- 不好  -->
<div class="article">
  <div class="article_title">编码规范</div>
  <div class="the_content">今天讲的内容是编码规范，讲师
     <div class="darkbold">若愚</div> @饥人谷</div>
</div>
<!-- 好 -->
<article>
  <h1>编码规范</h1>
  <p>今天讲的内容是编码规范，讲师
     <b>若愚</b> @饥人谷</p>
</article>

语法

• 用两个空格代替tab，保证不同环境展现一致。
• HTML中属性定义全用双引号“”。

<h1 class="hello-world">Hello, world!</h1>

• 声明的左花括号前添个空格。
• 声明语句的冒号后添个空格。
• 小于1的参数，可省略小数点之前的0。
• 使用简写，如用#fff代替#ffffff。

主要参考：bootstrap 编码规范

伪元素

伪元素中经常使用到的便是:before，:after。虽说在元素之前命名个inline元素可以实现一样的功能，但是使用伪元素将使代码更加简洁易懂。

使用场景

• clearfix
• 为边框添加三角符号。 demo
• vertical align实现垂直居中 demo