Web前端编码规范

通用规范

文件编码

所有文件都使用无 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; 和 ☺ 等的实体引用。

明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。

“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">

时间: 2024-10-15 01:42:36

Web前端编码规范的相关文章

Web前端开发规范【HTML/JavaScript/CSS】

前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规范的话,错误就会变得更加显而易见.如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是 bug.早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误.只要开发者们能够保证源代码源文件都严格遵循规范,那接下去所使用的混淆.压缩和编译工具则可投其所好不尽相同. 要

Web 前端代码规范

Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范. 目录 前端普适性规范 HTML 规范 CSS 规范 JS 规范 License public domain, Just take it. Thanks @Ruan YiFeng: https://github.com/

WEB前端开发规范文档(转)

http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或

前端编码规范

前端编码规范(1)-- 一般规范 前端编码规范(2)-- HTML 规范 前端编码规范(3)-- JavaScript 规范 前端编码规范(4)-- CSS 和 Sass (SCSS) 规范 WEB前端开发 http://www.css88.com/

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

麦子新课上线之web前端开发规范

同学们,Web前端开发又有课程上线啦!对Web前端感兴趣的同学们,速来围观哦~~下面简单介绍一下课程. [学霸学新,课快人一步] 课程简介: Web前端开发规范,可以帮助同学们,了解web前端开发规范的意义,掌握前端开发中的开发规范,掌握web前端开发中的实用技巧.面对企业团队开发,可以很快融入团队合作中,高效率的完成团队给予的任务. 课程地址→http://www.maiziedu.com/course/web/621-8960/ 老师简介: 何虎:8年软件开发经验,擅长互联网应用程序开发,曾

前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂的名称. 应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小. 通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义. 区分他们,使他们具有特殊意义,通常需要为“帮手”. 尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义, 语

Web前端开发规范文档(google规范)

(Xee:其实没什么规范约束,但是养成一种好习惯,何乐而不为?) 我推荐去看看google的开发规范,然后从他的当中去总结自己的开发规范. Google HTML/CSS代码风格指南 Google JavaScript 编码规范指南 ------------------------------------------------------------------------------------------------------------------------------- 绝大多数项

WEB前端 [编码] 规则浅析

前言 说到前端安全问题,首先想到的无疑是XSS(Cross Site Scripting,即跨站脚本),其主要发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中出现了不被预期的脚本指令并执行时,XSS就会发生.XSS有三类: 反射型XSS:发出请求时,XSS代码出现在URL中,作为输入提交到服务端,服务端解析后响应,在响应内容中出现这段XSS代码,最后浏览器解析执行,此过程就像一次反射: 存储型XSS:它与反射型XSS的差别仅在于--提交的XSS代码会存储在服务端,