翻译：谷歌HTML、CSS和JavaScript风格规范
- - 张鑫旭-鑫空间-鑫生活本文地址： http://www.zhangxinxu.com/wordpress/?p=2511. 原文地址： http://…style-guides/. 原文作者： Craig Buckler. 注：本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范，而是一种带有总结性质的简单称述.
翻译：谷歌HTML、CSS和JavaScript风格规范
标签：
外文翻译
css相关
Google
html
javascript
| 发表时间：2012-07-18 18:04 | 作者：张 鑫旭
出处：http://www.zhangxinxu.com/wordpress
by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=2511
注：本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范，而是一种带有总结性质的简单称述。完整的中文翻译，国内已经有（只有HTML/CSS, 无JS），您可以 点击这里访问。
//zxx: 以下为翻译正文，原作者的吐槽保留，同时免费赠送我自己的吐槽
我喜欢浏览风格规范。他们通常有明显的规则，虽然有些有荒诞之感，但是却可以发现之前未注意到的宝石。不幸的是，鲜有公司有这个勇气来发布自己内部的风格规范。 BBC 2010年时候公开其文档以及Google最终发布了其 内部项目使用的风格规范。
规则包括C++, Objective C, Python, XML, 以及R, 但是，我们最关心的是HTML, CSS以及JavaScript. 文档短小精悍。我见过太多尼玛写了差不多1001个规则的文档，压根就是显示“学识”，而不是传授有用意见！
让我们来仔细看看……
HTML
HTML样式规范并没有多少惊喜。
- 语义HTML5作为text/html
- 分离的标记、样式和脚本
- 在可能情况下验证你的标记
- 技术不支持的时候使用备胎，如
canvas
谷歌推荐打理每一个字节：使用UTF-8编码，剔除尾部的空白，避免实体引用，如 —及 ” 甚至推荐忽略可选结构以及结束标签，如：
<!DOCTYPE html> <title>节约字节数 = 节约钞票数</title> <p>如题。
作者吐槽：这……我虽然赞同要省字节，但是还是倾向于严格的XHTML解析。
译者吐槽：一字不差同上。
奇怪的是，谷歌建议使用连续的两个小空格代替tab空格。这不是两倍的字节大小吗？
CSS
样式规范主要就是更进一步的最佳实践以及字节节约技术：
- 使用有效的CSS, 除非是bugs处理或专属语法（浏览器私有前缀）
- 使用短ID或类命名，但确保他们不要太过隐晦，或直白（如
#blue-button） - 大型项目使用前缀，如
#xyz-help,.xyz-column - 选择器尽可能简单，如
#example，而不是ul#example - 使用缩写
-
url()中不使用引号，0后面不跟单位 - 使用
#ABC这种简写的16进制颜色表示，而不是#AABBCC - 每个声明最后都要有分号（即使是最后一个）
- 避免浏览器hacks
谷歌建议尺寸前面的数值0省掉，如 .5em, 可以节约一个字符.
规范还推荐每个声明占据一行。
然后，声明的书写按照首字母顺序排列，如下：
#example
{
border: 1px solid #000;
border-radius: 6px;
display: block;
font-family: sans-serif;
margin: 1em;
outline: 0;
padding: 10px;
text-align: center;
}
作者吐槽：对于属性的排序我还是喜欢根据其相关性，如块类型/尺寸，字体，文字对齐，填充，边距，颜色，背景，边框及其他属性。虽然，可以会让其他开发人员困惑，但是我自己用了好多年了！
译者吐槽：一字不差同上。
JavaScript
JavaScript的风格规范比较长，这可以理解，不过我们可以提炼出一些基本点：
- 总是使用
var声明变量 - 行末别忘了分号
- 使用标准而不是不标准的功能
- 使用驼峰命名（如：camelCaseNames）以及大写的常量（如：UPPERCASE），避免使用
const关键字，因为IE不支持 - 使用命名空间技术
- 避免
eval()除非反序列化（奇怪的是JSON解析并未提及） - 避免对象上使用
with(), 数组使用for in - 使用对象以及数组字面量而不是更冗长的声明
- 要知道 truthy和falsy规则
- JavaScript资源中不使用IE条件注释
- 不修改内置对象的原型——这会让人颜面扫地，因为这是让JavaScript更加强大的功能之一，但你知道这会导致问题
- 小心使用闭包以及不要循环引用
- 同样，小心 使用”this”
这里有个不太寻常的推荐，不在块域中使用 function, 如：
if (x) {
var foo = function() {}
}
而不是：
if (x) {
function foo() {}
}
显然，第二种语法到处都有使用。其可以正常运作，但是在ECMAScript中是无效的。
文档还提到，包装对象应该永远不要用在基元上，除非是类型转换。其会导致意想不到的结果，例如：
var x = new Boolean(false);
if (x) {
// 代码执行
}
愚蠢的JavaScript.
最后，规范说你应该优先使用单引号(‘)于双引号(“)，因为字符串可能包含HTML代码。
作者吐槽：我使用双引号到处沾花惹草，我不确定我能简单地改变这个习惯。但，我在PHP中对静态字符串又使用单引号。可能是我挑剔吧~~
译者吐槽：一字不差同上。
文档最好的建议是：保持一致。开发人员很少会赞同每个程序的规范要按照你自己的那套规则走。保持一致可以让6个月之后别人可以更容易地理解你的代码，可以让生活更加美好！
你是否赞同 Google的规范指南？贵公司是否强迫你遵循奇怪的开发做法呢？
//zxx: 以上为翻译正文
没喝过洋墨水，翻译水平捉襟见肘，文中要是有表述不准确的地方，欢迎指正，感谢阅读。
原创文章，转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=2511
（本篇完）
有话要说，点击 这里发表评论。
相关 [翻译 谷歌 html] 推荐：
翻译：稳定、地道HTML书写原则
- - 张鑫旭-鑫空间-鑫生活本文地址： http://www.zhangxinxu.com/wordpress/?p=2896. 原文链接： Principles of writing consistent, idiomatic HTML. 原文作者： necolas. //zxx: 以下为翻译全文 ——–. 所有的代码应看似出自一人之手，即使奶妈有多人.
谷歌发布神经机器翻译，翻译质量接近笔译人员
- - 雷锋网据外媒报道，谷歌于昨日发布了网页版和移动版的谷歌翻译. 在汉译英的过程中，会采用全新的神经机器翻译，而这个App每天要进行一千八百万次这样的翻译. 此外，谷歌针对这个翻译系统的运作原理，发表了一篇学术论文. 早前，谷歌就曾表示它们在谷歌翻译中运用了神经网络技术，但只限于实时视觉翻译这个功能. 前段时间，谷歌的高级员工Jeff Dean曾告诉VentureBeat，谷歌已经在尝试把越来越多的深度学习功能融入到谷歌翻译中.
【快乐假日】谷歌智能翻译霸气侧漏
- Zoe - 谷奥——探寻谷歌的奥秘对于谷歌中国众多国际化产品的中文版是如何翻译的江湖上一直有不同的传闻，最近又看到两个翻译亮点，真的是机器翻译的瑕疵. 上图截自Chrome Web Store发布后台，“全出血”这个词有点太“通俗”了感觉，属于full bleeds的直译，尽管大家也这么叫惯了，但是翻译成更书面一些的“满页印刷”应该更合适吧.
谷歌升级手机翻译软件 新增12个语种
- 韬光养晦 - cnBeta.COM网易科技讯 10月14日消息,据华尔街日报网站报道,谷歌13日发布了升级版的手机翻译软件，在继支持英语――西班牙语之间口语翻译之后，又增添了包括中文普通话在内的12个语种. 报道称,在推出移动翻译软件之前，谷歌就一直提供文本翻译和语音转换文字的翻译. 今年1月份,谷歌翻译增添了一项实验性新功能-------让手机即时翻译用户间的通话，但仅限于英语和西班牙语.
用神经网络“训练”谷歌翻译，机器翻译实现颠覆性突破
- - 钛媒体：网罗天下创新事钛媒体注：昨日，谷歌在 ArXiv.org 上发表论文《Google`s Neural Machine Translation System: Bridging the Gap between Human and Machine Translation》介绍谷歌的神经机器翻译系统（GNMT），当日钛媒体作者机器之心就对该论文进行了摘要翻译并推荐到网站（www.jiqizhixin.com）上.
HTML 安全列表
- 火锅土豆 - 酷壳 - CoolShell.cn下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了. IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击.
HTML学习笔记
- - CSDN博客推荐文章超文本标记语言（ 英文：HyperText
Markup Language，HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等 点击打开链接. w3schools 点击打开链接 {语法大全，超赞.
html嵌套规则
- - Web前端 - ITeye博客转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素（inline）. 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：. 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：.
Html 转换成PDF
- - 编程语言 - ITeye博客最近在搞一个关于html转换为pdf的需求，网上找了很多，但是如果批量处理就会出现问题，最后找到了PD4ML，解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹，并且在文件夹中建立pd4fonts.properties ，配置文件中的内容如下.