这是我在用的html基本文件模版,规范尽可能的参考了bootstrap的编码规范,虽然bootstrap用的不多,但是好的规范往往是共用的.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div>
<br><br/>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
</script>
</body>
</html>剩下还有一些需要注意的规范:
使用多个空格代替tab键,这个可以在IDE中设置,在sublime text3中设置方式为:
Perferences->Settings,在出现的窗口的右列{}中添加
"tab_size": 4,
"translate_tabs_to_spaces": true,
"expand_tabs_on_save": true
往往还有字体等需要设置,我的整体的设置是:
{
"font_face": "YaHei Consolas Hybrid",
"font_size": 15,
"ignored_packages":
[
"Vintage"
],
"tab_size": 4,
"translate_tabs_to_spaces": true,
"expand_tabs_on_save": true
}
HTML规范:
属性定义使用"",不要用''
不推荐在自闭合元素尾部加/,例如<br/>应改为<br>等.
(这个百度了一下,感觉还是看需要符合哪种规范,参考了知乎和stackoverflow)
不要省略可选的结束标签,例如</li></p></tr>>等
具体包括colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th
实用为王,任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序应按以下顺序依次排列,确保易读性:
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
boolean型属性不需要赋值
(同样要看实际需要,XHTML 规范要求boolean在声明时赋值,但是 HTML5 规范不用.)
尽量避免多余的父元素,会导致代码冗余臃肿
尽量避免用JS生成标签,这让文件不易检查,且降低性能.
CSS规范:
将单独的选择器单独放一行
每条声明语句应单独占一行,且 : 后应该插入一个空格
{}应当有特对格式,单独成行之类
.后应插入一个空格
参数小于1时省略前面的0,如用-.5px代替-0.5px
参数为十六进制时使用小写且使用简写,方便辨认. 如用#fff代替#FFFFFF.
参数为0时避免指定单位,如用 margin: 0; 代替 margin: 0px;
属性的声明顺序应按照如下顺序(根据影响重要性):
Positioning
Box model
Typographic
Visual
不使用@import指令,它增加了额外的请求次数,还会导致不可预料的问题
只含一条声明的样式,推荐放在一行内,如: .icon { background-position: 0 0; }
不要滥用简写形式的声明,设置需要设置的属性即可
确保你的代码能够自描述 注释良好并且易于他人理解
class 名称中只能出现小写字符和-(不是_或驼峰命名法),-用于相关class命名.合适的简写且意义明确
选择器:
对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。
