翻译:稳定、地道HTML书写原则

这篇文章发布于 2013年01月4日,星期五,15:59,归类于 HTML相关, 外文翻译。 阅读 73344 次, 今日 1 次 25 条评论

 

//zxx: 以下为翻译全文 ——–

一、一般原则

  • 所有的代码应看似出自一人之手,即使奶妈有多人。
  • 严格执行约定的风格。
  • 若风格不定,使用现有、常用风格。

二、空白

你的整个源代码应该只存在一种风格。空白使用前后一致,使用空白提高可读性。

  • 到死也不要混用空格符(spaces)和制表符(tabs)实现缩进。
  • 柔和缩进(spaces)或真实制表二选一,关键要一站到底。(个人偏好:空格-spaces)
  • 如果使用空格,选定一个缩进字符值。(个人偏好:4空格)

小提示:你可以配置编辑器“显示不可见”(“show invisibles”),此举可用来消除结束行的空白,避免违背上面(坚持一种缩进)的承诺。

三、格式

  • 标签以及属性名称总是小写。
  • 一行一个不连续元素。
  • 每个嵌套元素使用一个额外的缩进。
  • 布尔属性无值(如checked而不是checked="checked")。
  • 属性值总是使用双引号引起来。
  • 省略link样式表、style以及script元素的type属性。
  • 总是包含结束标签。
  • 自闭元素(img, br)不要包含斜杠。

(每行长度保持一个最大的合理值,例如 80列)

例如:

<div class="tweet">
    <a href="path/to/somewhere">
        <img src="path/to/image.png" alt="">
    </a>
    <p>[微博文字]</p>
    <button disabled>回复</button>
</div>

异常和轻微的偏差
元素含有多个属性,可以跨多行排版,以努力提高可读性以及提供更多有用的差异。

如:

<a class="[value]"
 data-action="[value]"
 data-id="[value]"
 href="[url]">
    <span>[文字]</span>
</a>

四、属性顺序

HTML属性应该以特定的属性排列,(如下)这可以某种程度上反应类名是主要接口——用做CSS以及JavaScript选择元素

  1. class
  2. id
  3. data-*
  4. 其他

例如:

<a class="[value]" id="[value]" data-name="[value]" href="[url]">[文字]</a>

五、命名

命名很难,但很重要。这是开发一个可维护的代码库重要的组成部分,并确保您HTML和CSS/JS见有个可伸缩的接口。

  • 使用清晰,周到,适当的HTML类名。名称应该体现HTML和CSS文件的信息。
  • 避免很系统地使用类名缩写,这会让事情变得难以理解。

下面是糟糕的命名:

<div class="cb s-scr"></div>
.s-scr {
  overflow: auto;
}

.cb {
  background: #000;
}

这是更好一点的命名:

<div class="column-body is-scrollable"></div>
.is-scrollable {
    overflow: auto;
}

.column-body {
    background: #000;
}

六、实例

含各种约定的例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档</title>
        <link rel="stylesheet" href="main.css">
        <script src="main.js"></script>
    </head>
    <body>
        <article class="post" id="1234">
            <time class="timestamp">2013年1月4日</time>
            <a data-id="1234"
             data-analytics-category="[value]"
             data-analytics-action="[value]"
             href="[url]">[文本]</a>
            <ul>
                <li>
                    <a href="[url]">[文本]</a>
                    <img src="[url]" alt="[文本]">
                </li>
                <li>
                    <a href="[url]">[文本]</a>
                </li>
            </ul>

            <a class="link-complex" href="[url]">
                <span class="link-complex__target">[文本]</span>
                [文本]
            </a>

            <input value="text" readonly>
        </article>
    </body>
</html>

//zxx: 以上为翻译全文 ——–

大家可以根据自己的实际情况,提炼出有帮助的信息。
翻译水平有限,文中要是有不准确之处,欢迎指正。

(本篇完)

分享到:


发表评论(目前25 条评论)

  1. 王木木说道:

    自闭元素(img, br)不要包含斜杠。这条不一样啊,不是说这种元素后面要加一个斜杠吗?到底加还是不加呢?

  2. 静寂无闻之夜说道:

    自己也是用 class=”” id=”” xxx=”” 这种顺序,很符合css的层叠,最近更新了emmet,有个好像叫merge的功能,inline-block空隙没有了,测试再也不用担心我的bug

  3. yetazhan说道:

    1,布尔属性无值(如checked而不是checked=”checked”)—- 闹哪样,我迷茫了?
    2,自闭元素(img, br)不要包含斜杠。—-老外果然是不用兼容低版本的浏览器,不是建议加空格斜杠吗?
    3,如果使用空格,选定一个缩进字符值。(个人偏好:4空格)—–一个tab键解决的问题,为什么非要敲四下?
    4,
    [文字]
    这样写整段代码巨长,现在的电脑都是宽频的,唉,闹哪样?
    5 .is-scrollable {
    overflow: auto;
    } 我记得命名好像不建议使用中划线的,建议使用下划线,我记错了?我真的错乱了。
    6,省略link样式表、style以及script元素的type属性。老外真先进,我记得《javascript高级程序设计》一书上建议保留type,唉,完全错乱了

    • 静寂无闻之夜说道:

      浏览器的思想是在于接受更多的东西,像拖个mp3,图片这些进浏览器,它也会播放和显示。但它明明是浏览器。理由就像前面说的,其它的问题都是个人风格习惯的问题,没有谁对谁错

    • 前端油条说道:

      2.自闭元素提倡无斜杠,这是基本公认的前端规范了
      3.tab在不同的编译器下会有不同缩进距离,规范一种(空格虽然麻烦但是稳定),不过sublime可以设置一个TAB换算成多少个空格,也是比较方便的。
      5.class的命名用中划线,比如 .head-nav,变量名驼峰法 var headNav 函数名首字母大写function HeadNav();
      6.和2一样,也是现在公认的比较流行的H5写法了,不必写type=”text/css/javascript”

  4. yetazhan说道:

    wa sai 楼主下次一定挑一些好点的文章翻译,挑一些公认的技术大家的文章翻译。
    这样既可以节约楼主宝贵的时间,也可以节约我们读者宝贵的时间。

    楼主的翻译质量一直不错,这事这篇文章实在不敢恭维。

    • 前端油条说道:

      呃,如果你不能接受新规范新知识,自己什么都不懂,停留在你以前记得,以前看过的阶段,就来评论说不敢恭维,那就停留在你的水平吧

  5. lisa说道:

    追随博主的分享,可以学到好多东西…
    不知是我今天眼睛不舒服,还是博主的文字太小,看文章一直都在揉眼睛…

  6. t说道:

    我也觉得自关闭元素应该加斜线最后。。。

  7. Michael J.说道:

    考一下鑫哥哈~
    jQuery里面.attr()和.prop()是什么区别?
    不许搜索哦

  8. 华晨说道:

    @张鑫旭 嗯,知道了,谢谢!通用类因为高度重用,所以命名从简^_^

  9. 华晨说道:

    有一个疑问,您的 CSS 代码库里会有诸如 l, r, fix, ml10… 等类命名,与上述“五、命名”有所冲突,请问如何权衡?谢谢

  10. 沙拉酷儿说道:

    img,br不加斜线不好吧

  11. sofsirwj说道:

    1、布尔属性无值(如checked而不是checked=”checked”)。
    2、省略link样式表、style以及script元素的type属性。
    3、自闭元素(img, br)不要包含斜杠。

    这3个貌似没必要过于纠结,整体风格统一就好(前提:可以通过html validator认证;我先在页头还“必须”是能触发IE混杂模式的才行 :()

  12. 小浪说道:

    自闭元素(img, br) 斜杠我觉得还是加上好些。

  13. linc说道:

    三、格式, 这里的建议前提是你使用html5文档声明,假如不是就很有问题了

  14. horatio说道:

    关于html的缩进:
    每个嵌套元素使用一个额外的缩进。

    我是一直有纠结JSTL的标签是否也应该额外缩进.比如:

    不过这是个小问题

  15. artwl说道:

    谢谢博主分享,能否简单说一下下面三点的原因:
    1、布尔属性无值(如checked而不是checked=”checked”)。
    2、省略link样式表、style以及script元素的type属性。
    3、自闭元素(img, br)不要包含斜杠。

  16. 深蓝说道:

    自闭元素(img, br)不要包含斜杠。我记得是需要的啊?