首页 > html5+css > css基础知识 > Google推荐的html/css规范
2017
02-21

Google推荐的html/css规范

介绍一下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个空格,不要使用 tab 或者混合 tab 和空格的缩进。

大小写

以下都应该用小写:HTML元素名称,属性,属性值(除非 text/CDATA),CSS 选择器,属性,属性值。

编码

在 HTML 中通过 <meta charset="utf-8"> 指定编码方式,CSS 中不需要指定,因为默认是 UTF-8。

 

HTML 风格规范

HTML 文档应使用 HTML5 的文档类型:<!DOCTYPE html>。

孤立标签无需封闭自身,<br> 不要写成 <br />。

关注分离

标记、样式和脚本分离,确保相互耦合最小化。

实体引用

如果团队中文件和编辑器使用同样的编码方式,就没必要使用实体引用,如 &mdash;, &rdquo;,&#x263a; 除了一些在 HTML 中有特殊含义的字符(如 < 和 &)以及不可见的字符(如空格)。

<!-- 不推荐 -->

The currency symbol for the Euro is &ldquo;&eur;&ldquo;.

<!-- 推荐 -->

The currency symbol for the Euro is “€”.

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 命名分隔符

选择器中使用连字符可以提高可读性。推荐使用"-",不推荐"_"

#video-id {}

.ads-sample {}

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%;

}

 

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。