前言:为了写出更健壮、易维护的代码,我们需要一套合理的代码标准。
因此在吸取前辈们的一些最佳实践经验后演化出一系列的代码标准,这里可查看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…