谷歌的HTML / CSS规范指南

最新推荐文章于 2024-08-20 15:49:45 发布

xinyuandada

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量353

点赞数

分类专栏：规范文章标签： css html 谷歌

规范专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考链接：https://google.github.io/styleguide/htmlcssguide.xml
ps:参考链接中有很多例子，我没有翻译和列出。
粗略翻译，有什么错误欢迎纠正；

General Style Rules(一般样式规则)
对嵌入的资源，省略协议（http:,https:);
对指向图片、媒体文件、样式表、script,的URLs上，省略协议的（http:,https:)部分，除非链接不是这两个协议（比如我们常用的 weixin://）；
这样做的目的：可以帮助我们阻止混合内容，并且压缩文件大小；

例1，
错误的：
<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
正确的：
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
例2，
错误的：
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
正确的：
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}

General Formatting Rules（一般格式规则）
1，一次使用两个空格的缩进，不要用tabs,或者是tabs和空格混着用；
2，所有的代码必须用小写：html元素名，html属性（attr),html属性值，css选择器，css属性，css属性值；(有些特定字符串除外，比如China)
3，删掉尾部多余的空格，尾部多余的空格是不必要的，并且会与你想要的效果造成差别；

General Meta Rules(一般的meta规则)
1，用UTF-8(不用BOM)。确保你的编辑器使用UTF-8字符编码，没有字节顺序标记；
2，在需要的地方解释代码，写明注释；（可选）
3，用TODO标记要做的事情；
高优先级的要做的事情，只用关键字TODO，不要用其他的像@@；
添加一个括号链接（名字或者邮件），添加行动项目在冒号后面；

例子：
{# TODO(john.doe): revisit centering #}
<center>Test</center>

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML Style Rules（html风格规范）

1，文件类型
用html5.
html5是所有的HTML文档的首选：<!DOCTYPE html>
好的html不应该关闭空元素，比如用<br>不要用<br/>

2，根据它的语义使用html

<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

3，多媒体回落
对于多媒体，提供可选择性的方案；
对于多媒体，如图像，视频，动画对象通过画布，确保提供替代访问。这意味着使用有意义的图像替代文字（alt）、视频和音频记录和标题，如果可以的话。
提供替代内容的可访问性是重要原因：盲人用户有一些线索知道图像的“ALT“、和因为设备问题其他用户可能没有办法理解的视频或音频内容。
（如果图片的alt属性将引入冗余复杂的内容，而对图像的目的纯粹是装饰性的，考虑不使用替代文字，如alt=“”。）

<!-- Not recommended -->
<img src="spreadsheet.png">
<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

4，关注点的分离
严格的保持结构（tag)，样式(style)，行为逻辑（script）分开，并尝试保持三个绝对最小的相互作用；
也就是：确保文档和模板只包含html,html完全服从于结构，表象为样式表，一切行为逻辑为脚本；
此外：样式表和脚本之间的联系尽可能小，近可能从文档和模板中保持（样式表和脚本的）联系；
（个人理解：样式表-模板，模板-脚本，也就是模板和html作为三者的中心连接）
从行为中分离结构是维护原因的重要因素。改变html会更加昂贵，比改变样式和脚本；

5，实体引用
不要用实体引用
没有必要用实体引用的不需要用。

例如：&mdash;, &rdquo;, 或者 &#x263a;

有一个例外是，在html里有特殊意义的字符，例如：< &;

6，可选标签
忽略那些可选的标签（可有可没有的）；团队工作需要建立公共规范；
考虑忽略那些可选标签；
参考这个链接：http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission

7，类型属性
忽略 type属性，对样式表和script;

HTML Formatting Rules(HTML格式的规则)

1,一般的格式：
用新的一行,对block,list,table元素。并且每个子元素缩进；

2，html引号
引用属性值时，使用双引号。

CSS Style Rules（css样式规则）

1，id 和 class命名
使用有意义的或通用的标识和类名称。

2，id 和 Class 命名风格
命名尽可能短，但在必要的时候可以长；
这样可以增进理解性，和代码效率；

3，类型选择器
如果不是很必要，不要用标签名作为css选择器，尽量用class和id;

4，用速记属性
CSS提供了多种速记属性（如字体），应尽可能使用，即使只有一个值显式设置。
用速记属性的编码效率和可理解性是有用的。

不推荐：
/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
推荐：
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

5，0和单位
忽略单位，在属性值为0的后面；
margin: 0;
padding: 0;

6，前置0
忽略前置0
font-size: .8em;

7，十六进制记数法
使用3个字符的十六进制记数法在可能的地方。
颜色值，允许的话，3个字符的十六进制记数法更短、更简洁。

/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;

8，前缀
前缀选择器与应用程序特定的前缀（可选）。
在大型项目以及代码嵌入到其他项目或在外部网站使用前缀（命名空间）ID和类名称。使用简短，唯一标识符后跟一个破折号。
使用命名空间有助于防止命名冲突，可以使维修更容易，例如在搜索和替换操作。

9，id和class名称分隔符
通过一个字符分开ID和类名称。
可以增加理解和扫描；

10，Hacks
无效的用户代理检测以及CSS的“黑客”-去尝试其他的方法。

CSS Formatting Rules（CSS格式设置规则）

1，申报单
按字母顺序排列的声明。
把声明按字母顺序排列，以便在一个易于记忆和维护的方式中实现一致的代码。
忽略用于排序的供应商特定的前缀。然而，对于一个特定的CSS属性的多个供应商特定的前缀应保持分类（例如-moz前缀之前- WebKit）。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

2，块体内容缩进
缩进所有块的内容，这是规则，在规则及声明，以反映层次、提高认识。

@media screen, projection {
  html {
    background: #fff;
    color: #444;
  }
}

3，声明停止
在每一个声明使用分号。
每一个声明与一致性和可扩展性的原因，分号。

4，属性名停止
在一个属性名的冒号之后使用空格。
总是使用单一的属性和值之间的空间（但没有属性和冒号之间的空间），因为一致性的原因。

5，声明块分离
在最后一个选择器和声明块之间使用空格。
总是在最后一个选择器和开始声明块的开括号之间使用一个空格。
开括号应该在给定规则中的最后一个选择器的同一行。

6，选择器和声明分离
以新的一行单独的选择器和声明。
始终为每个选择器和声明展开一个新的行。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

7，规则分离
新的线路分离规则。
总是把一个空白行（2行中断）之间的规则。

8，CSS引号
用单引号标记属性选择器或属性值；
CSS Meta Rules（CSS的元规则）
如果可能的话，通过使用注释的组样式表节。新的部分用一个行来分离。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

尾声：

保持一致。
如果你是编辑代码，花点时间看看周围的代码，并确定它的风格。如果他们在所有的算术运算符上使用空格，你也应该。如果他们的评论有小方框的哈希标记，让你的评论周围的哈希标记的小方框。
有一个风格指南的要点是有一个共同的词汇的编码，所以人们可以专注于你所说的，而不是你怎么说。我们在这里提出了全球风格的规则，人们知道了词汇，但地方风格也很重要。如果你添加到一个文件中的代码看起来与周围的代码有着极大的不同，当他们去读它时，它会把读者从他们的节奏中抛出。避免这种。

后记：刚发现有很多相似文章，个人认为这个翻译排版较好：
http://www.w3cways.com/1281.html 可以参考学习

xinyuandada

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷歌的HTML / CSS规范指南

谷歌的HTML / CSS规范指南本文定义的html和css 的规范，目的在于提高代码质量，合作效率，构成有利的基础。他适用于使用原始的html，css包括Gss文件。在保证代码质量的前提，可以用一些免费的工具，用来压缩，编码代码；
复制链接

扫一扫