Web前端编码规范

浏览数：33 / 时间：2015年06月09日

通用规范

文件编码

所有文件都使用无 BOM 的 UTF-8 编码。

缩进

使用4个空格缩进。
Tab 在不同的操作系统下长度可能不同，为了代码在任何情况下都缩进一致要使用空格。
在所有的IDE工具中，都可以设置1个Tab键转换成4个空格，这样就可以敲一个Tab键输出4个空格。

注释

书写注释，方便维护。
注释内容两边要各有一个空格。

省略协议头

省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )，这样可以同时兼容 http 和 https 。如果不是这两个声明的URL则不省略。
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 省略http/https协议头 -->
        <img src="//www.xxx.com/x.jpg">
    </body>
</html>

项目名、目录名和文件名

项目名、HTML文件名、CSS/Sass文件名、JS文件名，全部采用小写方式， 多个单词之间以中划线分隔。


HTML 规范

文档声明

使用HTML5文档声明。”DOCTYPE”大小写均合法，但建议大写，这样看上去更专业。
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>

大小写

所有元素和属性名都小写。

为根元素指定 lang 属性

为文档设置正确的语言，将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则。
“en”代表英文；”zh-CN”代表简体中文。

字符编码

毫无疑问，采用UTF-8编码。
使用UTF-8编码，就不需要使用类似 &mdash; 、 &rdquo; 和 &#x263a; 等的实体引用。
明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。
“UTF-8”大小写均合法，但建议大写。

属性

属性值使用双引号

属性值不管使用双引号还是单引号，浏览器都会解析成双引号，所以如果使用单引号的属性值中含有双引号就会出错。

布尔型属性不用赋值


属性顺序

属性应当按照以下给出的顺序依次排列，确保代码的易读性：
(1) class
(2) id
(3) name
(4) data-*
(5) src, for, type, href, value, max-length, max, min, pattern
(6) placeholser, title, alt
(7) aria-*, role
(8) required, readonly, disabled

启用 IE Edge 模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

排版

嵌套元素应当缩进


尽量避免多余父元素


不要在自闭合元素的尾部添加斜线


不要省略可选的结束标签


行末不要有空格


id 和 class

id和class的使用场景

id用于页面中独一无二的、特定的元素。
用于布局的元素用class，不管是不是在页面中唯一。

id 和 class命名

id 和 class 的名称一律小写，多个单词以中划线（不是下划线）连接。
名称反映功能。

JavaScript生成标签

在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

结构、样式、行为分离

确保结构(HTML)、样式(CSS)、行为(js)相分离，即以外部引入的方式引用css文件和js文件，避免内联和行内css、js代码。
引入css文件和js文件不需要指定type属性，因为 text/css 和 text/javascript 分别是它们的默认值。
js文件应当放在页面末尾。

提供有关页面的元信息

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name=”description” content=” ”>
        <meta name=”keywords” content=” ”>
        <meta name=”author” content=” ”>
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

使用HTML5新语义标签



CSS 规范

每个选择器单独占一行


每条声明独占一行

这是为了获得更准确的错误报告。对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。

声明块的左花括号前添加一个空格


声明块的右花括号应当独占一行


声明语句的 : 后应该插入一个空格


声明语句以分号结尾

最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

以逗号分隔的属性值，逗号后面插入一个空格

不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。
这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
#div {
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

省略小于 1 的小数前面的 0


十六进制值全部小写


使用简写形式的十六进制值


为选择器中的属性添加双引号

例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

避免为 0 值指定单位


属性顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：
(1) Positioning
(2) Box model 盒模型
(3) Typographic 排版
(4) Visual 外观
.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

将媒体查询放在相关规则的附近

不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

当使用带特定厂商前缀的属性时，属性的值垂直对齐

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

不要使用@import


选择器的性能

(1)使用 classe 而不是通用元素标签来优化渲染性能。
(2)避免在经常出现的组件中使用一些属性选择器 (例如，[class^="..."])。浏览器性能会受到这些情况的影响。
(3)减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。

代码组织

(1) 以组件为单位组织代码。
(2) 制定一个一致的注释层级结构。
(3) 使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。


JavaScript规范

没有比这个更好的了：https://github.com/airbnb/JavaScript


杂项

保证favicon可访问

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：
(1)在 Web Server 根目录放置 favicon.ico 文件。
(2)使用 link 指定 favicon：<link rel="shortcut icon" href="path/faviconName.ico">



郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： web前端编码规范web前端编码规范

相关文章

随机文章

您可能还喜欢

您可能还喜欢