这篇文章发布于 2012年07月18日,星期三,18:04,归类于 外文翻译。 阅读 75673 次, 今日 2 次 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
(本篇完)
- HTML5扩展之微数据与丰富网页摘要 (0.847)
- 关于Google圆角高光高宽自适应按钮及其拓展 (0.546)
- 中国古代道家思想与网页重构的思考 (0.546)
- CSS页面重构之“门派”之分 (0.519)
- 翻译:稳定、地道HTML书写原则 (0.474)
- 网页布局思想浅议-淘宝新版首页为实例 (0.473)
- 翻译-高质量JavaScript代码书写基本要点 (0.454)
- 浏览器地理位置(Geolocation)API 简介 (0.446)
- Google字体API使用简单示例 (0.446)
- JS前端验证与用户自由思想 (0.446)
- CSS/CSS3 box-decoration-break属性简介 (RANDOM - 0.027)
团队需要通用规范,但无所谓的细节【空格】就没必要了,否则,就是教条。
一个团队需要规范
完全一致的习惯诶…特别是CSS和HTML那部分
避免eval()除非反序列化(奇怪的是JSON解析并未提及)
难道反序列化不包括json的解析吗
呵呵 一直习惯双引号 不过最近也改单音了