规范

无规矩不成方圆

编码

写出让人有阅读一篇美文般的体验的代码。

总则

开发时，除了第三方库以及写在 HTML 文档中的代码，脚本要用 CoffeeScript，样式则用 Sass。

合理的「规定」能够让协作更美好。;-)

在编写代码时较为严格地遵守「结构、样式和行为三者分离」这一原则——HTML 文档中不掺杂样式及脚本的代码。虽说如此，但是 HTML 文档中允许适当加入些脚本代码。不过，只能是简单的条件判断及函数调用，并且不得超过 5 行（传入函数中的参数奇多的情况除外）。

不要想着用 JavaScript 来解决样式问题，以及用 CSS 去解决逻辑问题！

每个缩进必须用两个英文空格；JavaScript 语句结束以及 CSS 每条规则后必须加英文分号；字符串必须用英文双引号。

HTML

要以 HTML5 标准为基础——

doctype 用 <!DOCTYPE html>，这样大部分浏览器激活的是标准模式；
用小写字母拼写标签；
在 <html> 上用 lang 属性指定语言（中文、英文等）；
在 <html> 上用 dir 属性指定文本方向；
在 <head> 中内嵌 <meta charset=""> 指定字符集；
把外联 CSS 在 <head> 中引入；
把外联 JavaScript 在 <body> 最底部引入；
自定义属性用 data-* 的形式；
在浏览器不能使用 JavaScript 时通过 <noscript> 进行提示；
事件通过 JavaScript 来进行绑定并处理，不要写在标签属性上。

<!DOCTYPE html>
<html lang="zh" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Spec of HTML</title>
    <link rel="stylesheet" href="./sample.css">
  </head>
  <body>
    <noscript>You had forbidden script. Please enable it.</noscript>
    <a id="t_a" data-self-attr="hello">Self-defined attribute</a>
    <script src="./sample.js"></script>
    <script>
      <!--
      document.getElementById("t_a").addEventListener("click", function() {
        // your code
      }, false);
      //-->
    </script>
  </body>
</html>

CSS

因为是响应式网页，页面要具备弹性，因此长度单位尽量用相对单位 %、em 之类，而非 px 等。

不允许使用 IE 所支持的 expression()，如下：

#wrapper {
  width: expression(documentElement.clientWidth > 1000 ? "1000px" : "auto");
}

有渔前端团队

规范

编码

目录

总则

HTML

CSS