HTML, CSS编码规范

HTML

1. 语义与呈现分离
   将元素的语义与元素对其内容呈现结果的影响分开
2. 元素选用原则
   • 少即是多（less is more）
     标记只应该应内容对语义的需要使用。
     tips:问问自己打算如何发挥一个元素的语义作用，如果不能答出就不用这个元素
   • 别误用元素
     只宜将元素用于它们原定的用途，不要创造自有的语义。如果找不到适合的，可以考虑通用元素（如span或div），并用全局属性class表明其含义
   • 具体为佳，一以贯之
     同一个元素的使用在整个页面上要保持一致。

CSS

命名规范（很重要）

使用连字符分割

.red-box {
   border: 1px solid red;
}

BEM规范
block-component__element--modify

.stick-man__head--small {
}
.stick-man__head--big {
}

小项目中一般只用连字符分隔法来写类名，用户界面复杂的使用BEM方法
css命名视图解决3类问题：

1. 仅从名字就能知道一个 CSS 选择器具体做什么
2. 从名字能大致清楚一个选择器可以在哪里使用
3. 从 CSS 类的名称可以看出它们之间的联系

和JavaScript相关的类名
js-

参考：
[译]这些 CSS 命名规范将省下你大把调试时间

属性书写顺序（重要）

同一个选择器下的属性在书写时，应按功能进行分组，并按如下顺序书写：

1. 布局方式、位置（position / top / right / bottom / left / float / display / overflow）
2. 盒模型（border / margin / padding / width / height）
3. 文本相关（font / line-height / text-align / word-wrap）
4. 视觉效果（background / color / transition / list-style）
   参考：
   CSS编码规范

通用样式规则

协议

外部资源的下载尽可能使用https协议

<!-- Recommended -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

缩进

使用2个空格缩进

.example {
  color: blue;
}

大小写

只使用小写（字符串及特殊情况除外）

<!-- Recommended -->
<img src="google.png" alt="Google">

末尾空白

移除末尾空白

编码

使用 UTF-8

注释

范围、目的

type属性

在样式表和脚本中的标签忽略type属性
HTML5默认 type 为 text/css 和 text/javascript 类型，所以没必要指定。即便是老浏览器也是支持的。

<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

类型选择器

避免使用css类型选择器
出于性能考虑，非必要情况不使用标签名和id或class进行组合

/* 推荐 */
#example {}
.error {}

属性缩写

写属性的时候尽量缩写

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0和单位

省略0后面的单位

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

url的引号

省略url的引号

@import url(//www.google.com/css/go.css);