zoukankan      html  css  js  c++  java
  • 翻译:谷歌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个月之后别人可以更容易地理解你的代码,可以让生活更加美好!

  • 相关阅读:
    浏览器组成
    Go!!!
    产假计算器地址
    flex 纵向布局,垂直换行,没有撑开父盒子宽度,求解??
    毕业档案
    进程与线程
    事件循环
    回调地狱
    错误优先回调
    组件 v-if 小心哦
  • 原文地址:https://www.cnblogs.com/qiaoxinming/p/6539354.html
Copyright © 2011-2022 走看看