翻译：谷歌HTML、CSS和JavaScript风格规范
我喜欢浏览风格规范。他们通常有明显的规则，虽然有些有荒诞之感，但是却可以发现之前未注意到的宝石。不幸的是，鲜有公司有这个勇气来发布自己内部的风格规范。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个月之后别人可以更容易地理解你的代码，可以让生活更加美好！
翻译：谷歌HTML、CSS和JavaScript风格规范的更多相关文章
- 【转】前端工程师必须了解的 谷歌 HTML/CSS 规范
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...
- 谷歌 HTML/CSS 规范 2016-12-30
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...
- [收藏]谷歌htm/css规范
通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两种协议下都不可用.这种方案称为 protocol-relative URL,好处是 ...
- 【转】JavaScript 风格指南/编码规范（Airbnb公司版）
原文转自:http://blog.jobbole.com/79484/ Airbnb 是一家位于美国旧金山的公司,本文是其内部的 JavaScript 风格指南/编码规范,在 Github 上有 11 ...
- 必看谷歌HTML/CSS规范
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分( http:,https: ) ...
- 常用html、CSS、javascript前端命名规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
- JavaScript 风格指导（Airbnb版）
JavaScript 风格指导(Airbnb版) 用更合理的方式写 JavaScript 原文 翻译自 Airbnb JavaScript Style Guide . 目录 类型 引用 对象 数组 解 ...
- Dojo Javascript 编程规范(转)
前言 相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript.原文链接: http://dojotoolkit.org/developer/StyleGuide ...
- 新手理解HTML、CSS、javascript之间的关系
http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...
随机推荐
- 豆瓣爬虫Scrapy“抄袭”改写
主要是把项目从docker里面扒拉出来,但是扒拉完好像又没有什么用,放在docker里面运行多好. 源码下载下面主要记一下改动的地方吧. 配置:在database.py中改掉自己的数据库配置. 表结构 ...
- Java static特性
static 表示是静态的 特点是:可以用类直接访问. 属于类, 在类加载时就有 因此static方法不能访问成员的 但是成员的可以访问静态的 所有对象可以共享. 因此常常用作工具,比如Math.PI ...
- JS控制 input 输入字符限制全搜集
ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > 只能是中文 ...
- 论文翻译——Dynamic Pooling and Unfolding Recursive Autoencoders for Paraphrase Detection
Dynamic Pooling and Unfolding Recursive Autoencoders for Paraphrase Detection 动态池和展开递归自动编码器的意译检测 论文地 ...
- Seconds from winning
英语沙龙 1. Who winned the game? Answer: It was not Paxton who would hoist the winner's trophy. Paxton h ...
- Codeforces1303F Number of Components
Description link 题意:给一个全\(0\)矩阵,每次支持一个修改,修改不还原(这要是还原了不就成\(A\)题了) 然后询问每一次修改完了当前矩阵的连通块个数 每一个修改的值单调不降 修 ...
- 关于前端html5的总结
简介 HTML5 是HTML语言的第5次重大修改产生的新的HTML语言版本 HTML5 是W3C组织和众多主要浏览器厂商以及众多开发者共同努力的结果,得之不易 HTML5 主要改进包括:增加新的HTM ...
- java threadlocal 背景 本质
背景 JAVA中有全局变量(静态变量,不论在哪个函数 都能访问).局部变量(函数中定义的变量,在栈中,只能在本函数内访问),主要这2种类型. threadlocal变量 是一种线程级全局的变量(普通的 ...
- P4327 彼得潘框架
题意翻译 “彼得·潘框架”是一种装饰文字,每一个字母都是由一个菱形框架.一个彼得·潘框架看起来像这样 (x是字母,#是框架): ..#.. .#.#. #.X.# .#.#. ..#.. 然而,只是一 ...
- 在线好用的json转xml超级好用在线json与xml互相转换
在线好用的json转xml超级好用在线json与xml互相转换 拿走不谢:http://www.yzcopen.com/json/jsonxmlformat