翻译：谷歌HTML、CSS和JavaScript风格规范

这篇文章发布于 2012年07月18日，星期三，18:04，归类于 外文翻译。 阅读 75605 次, 今日 4 次 5 条评论

 

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

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , ,


发表评论（目前5 条评论）

  1. leo说道：
    2012年09月4日 09:42

    团队需要通用规范，但无所谓的细节【空格】就没必要了，否则，就是教条。

    回复
  2. csy说道：
    2012年09月3日 07:53

    一个团队需要规范

    回复
  3. 卜卜口の说道：
    2012年08月5日 11:04

    完全一致的习惯诶…特别是CSS和HTML那部分

    回复
  4. 莫莫说道：
    2012年07月24日 13:57

    避免eval()除非反序列化（奇怪的是JSON解析并未提及）
    难道反序列化不包括json的解析吗

    回复
  5. xiaofanV587说道：
    2012年07月18日 22:49

    呵呵 一直习惯双引号 不过最近也改单音了

    回复