3

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

 2 years ago
source link: https://www.zhangxinxu.com/wordpress/2013/01/principles-writing-consistent-idiomatic-html/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2896

//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-*
<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: 以上为翻译全文 ——–

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

（本篇完）1f44d.svg 是不是学到了很多？可以分享到微信！
1f44a.svg 有话要说？点击这里。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK