Google推荐的html/css规范
qingheluo2017-02-21清河洛301
介绍一下Google推荐的HTML和CSS编写格式规范，以建立良好的个人编码习惯通用样式规范省略图片、样式、脚本以及其他媒体文件URL的协议部分(http:,https:)，除非文件在两种协议下都不可用这种方案称为protocol-relativeURL，好处是无论你是使用HTTPS还是HTTP访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {backgroun...
介绍一下Google推荐的HTML和CSS编写格式规范，以建立良好的个人编码习惯
通用样式规范
省略图片、样式、脚本以及其他媒体文件URL的协议部分(http:,https:)，除非文件在两种协议下都不可用
这种方案称为protocol-relativeURL，好处是无论你是使用HTTPS还是HTTP访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {background: url("//www.google.com/images/example");}
缩进格式规范
一次缩进2个空格(规范是规范，我就是喜欢用4个空格)，不要使用 tab 或者混合 tab 和空格的缩进。
大小写
以下都应该用小写：HTML元素名称，属性，属性值(除非 text/CDATA)，CSS 选择器，属性，属性值。
编码
在 HTML 中通过 <meta charset="utf-8"> 指定编码方式，CSS 中不需要指定，因为默认是 UTF-8。
HTML 风格规范
HTML 文档应使用 HTML5 的文档类型：<!DOCTYPE html>
孤立标签无需封闭自身，<br> 不要写成 <br />
关注分离
标记、样式和脚本分离，确保相互耦合最小化
实体引用
如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如&&
除了一些在HTML中有特殊含义的字符(如 < 和 &)以及不可见的字符(如空格)
type 属性
在引用样式表和脚本时，不要指定 type 属性，除非不是CSS或JavaScript
因为HTML5中已经默认指定样式变的type是text/css，脚本的type是text/javascript
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML 引号
HTML属性值用双引号。
CSS 引号
属性选择器和属性值用单引号，URI 的值不需要引号。
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
选择器
除非需要，否则不要在 id 或 class 前加元素名。
ul#example {}
div.error {}
0 和单位
值为 0 时不用添加单位。
开头的 0
值在 -1 和 1 之间时，不需要加 0。
font-size: .8em;
16进制表示法
color: #eebbcc; ==> color: #ebc;
ID 和 Class 命名分隔符
选择器中使用连字符可以提高可读性
推荐使用"-"，不推荐"_"
CSS声明结束
每行 CSS 都应以分号结尾。
.test {
display: block;
height: 100px;
}
属性名和值之间都应有一个空格。
h3 {
font-weight: bold;
}
声明样式块的分隔
在选择器和 {} 之间用空格隔开。
#video {
margin-top: 1em;
}
选择器分隔
每个选择器都另起一行
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
规则分隔
规则之间都用空行隔开。
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}