HTML和CSS的开发标准总结

前言：为了写出更健壮、易维护的代码，我们需要一套合理的代码标准。
因此在吸取前辈们的一些最佳实践经验后演化出一系列的代码标准，这里可查看Code Guide ，在实践中慢慢朝标准看齐，朝优秀看齐，peace！

博主根据Code Guide筛选并总结出了以下实用性更强的规范，这里主要包括HTML和CSS两大类。

一、有关HTML

1.语法

• 不要大写标签，包括文档类型
• 属性上使用双引号，切勿使用单引号
• 自闭元素中不要包含斜线，HTML5规范认为这条规范是可选的，即可包含可不包含

2.语言属性

HTML5规范：“鼓励作者在html根元素上指定lang属性，以提供文档的语言。这有助于语音合成工具确定使用哪些发音，翻译工具确定使用哪些规则，等等。”

3.IE兼容模式

Internet Explorer支持使用文档兼容性标记来指定页面应呈现为IE的哪个版本。除非情况另有要求，否则指示IE使用最新支持的模式和Edge模式最有用。

<meta http-equiv="x-ua-compatible" content="ie=edge">

如果需要支持IE9或IE8，那么需要使用此标记（X-UA-Compatible标记）。如果您仅支持最新的浏览器（IE11和/或Edge），那么可以完全删除此标签。

• IE=edge 表示IE应该使用其渲染引擎的最新（边缘）版本

更多理解参考这篇文章

4.CSS和JavaScript

根据HTML5规范，需要将CSS和JavaScript的type设为text/css和text/javascript（即默认值时），无需指定。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

5.属性顺序

HTML属性应按此特定顺序排列，以便于阅读代码

• class
• id， name
• data-*
• src，for，type，href，value
• title， alt
• role， aria-*

6.布尔属性

布尔属性是不需要声明值的属性，你不需要为它添加任何值

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

7.减少标记

在编写HTML时，请尽可能避免使用多余的父元素。很多时候，这需要迭代和重构，但是生成的HTML更少。请看以下示例：

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

8.JavaScript中的标记

在JavaScript文件中编写标记会使内容更难查找，更难编辑且性能降低。尽可能避免它，React框架的js文件也应该尽量。

二、有关CSS

to be continued…