文档章节

前端开发规范

阿振
 阿振
发布于 2016/06/24 23:53
字数 2649
阅读 44
收藏 3
点赞 0
评论 0

前端开发规范

规范目的

为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档。本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改。

通用约定

  1. 基本准则:符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
  2. 文件与目录命名约定:一律小写,必须是英文单词或产品名称的拼音,多个单词用下划线(_)连接。只能出现英文字母、数字和下划线,严禁出现中文;出现版本号时,需要用字母 v 做为前缀,小版本号用点号(.)隔开,比如 global_v8.js 或 detail_v2.2.js;该命名规范适用于 html, css, js, swf, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录。
  3. 文件编码约定:一律使用 UTF-8 编码.
  4. id 和 class 命名约定:内容优先,表现为辅。首先根据内容来命名,比如 main-nav。如果根据内容找不到合适的命名,可以再结合表现来定,比如 skin-blue、 present-tab、col-main;用于样式的 id 和 class 名称一律小写,多个单词用连字符连接,比如 recommend-presents,名称中只能出现小写的 26 个英文字母、数字和连字符(-),任何其它字符都严禁出现;id 和 class 尽量用英文单词命名。确实找不到合适的单词时,可以考虑使用产品的中文拼音;在不影响语义的情况下, id 和 class 名称中可以适当采用英文单词缩写, 比如 col, nav, hd, bd, ft 等, 但切忌自造缩写; id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写, 比如 present、col; 在 JavaScript 代码中当作 hook 用的 id 或 class, 命名规则为驼峰规则,比如:navSubMenu,tableForm。 注意:如果在 JavaScript 和 CSS 中都需要用到,则不用遵守本约定。

HTML编码规范

(1) 语义

使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

(2) 大小写

元素的标签和属性名必须小写, 属性值必须加双引号; 例如:

<!-- 不推荐 -->
<A HREF='/'>Home</A>
<!-- 推荐 -->
<a href="/">Home</a>

(3) 空格

去除比不必要的空格; 例如:

<!-- 不推荐 -->
<p>test                  </p>
<!-- 推荐 -->
<p>test</p>

(4) 嵌套

元素嵌套遵循 (X)HTML Strict 嵌套规则; 正确区分自闭合元素和非自闭合元素. 非法闭合包括:<br>..</br>、<script />、<iframe />, 非法闭合会导致页面嵌套错误问题; 尽可能减少div嵌套层数。

(5) 自定义属性

通过给元素设置自定义属性来存放与 JavaScript 交互的数据, 属性名格式为 data-xx (例如:data-lazyload-url)。某些第三方插件自有数据不限此规范。

(6) DOCTYPE和编码 页面文档类型统一使用HTML5 DOCTYPE,utf-8 编码,代码如下:

<!doctype html>
<meta charset="utf-8" />

(7) 注释 建议对超过10行的页面模块进行注释, 以降低开发人员的嵌套成本和后期的维护成本. 例如:

<div id="sample"> ... </div> <!-- #sample END -->
<div class="sample"> ... </div> <!-- .sample END -->

(8) TODO 使用 TODO 来标记待做事情,便于后期搜索,在 TODO 后添加 (姓名或邮件) 来表示分类。

<!-- TODO(haovei): remove duplicate tag -->
<p><span>2</span></p>

(9) 代码分离 将表现,行为和结构分离:不要在 html 和模板中加入除了结构以外的东西,在文档中引入尽可能少的样式和脚本; 在页面中尽量避免使用style属性,即style="…"。

(10) 结构性元素 p 表示段落. 只能包含内联元素, 不能包含块级元素; div 本身无特殊含义, 可用于布局. 几乎可以包含任何元素; br 表示换行符; hr 表示水平分割线; h1-h6 表示标题. 其中 h1 用于表示当前页面最重要的内容的标题; blockquote 表示引用, 可以包含多个段落. 请勿纯粹为了缩进而使用 blockquote, 大部分浏览器默认将blockquote 渲染为带有左右缩进; pre 表示一段格式化好的文本。

(11) 头部元素 title 每个页面必须有且仅有一个 title 元素; base 可用场景:首页、频道等大部分链接都为新窗口打开的页面; link link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性; style type 默认为 text/css, 可以省去; script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字; noscript 在用户代理不支持 JavaScript 的情况下提供说明;。

<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"  type="text/css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

(12) 文本元素 特殊符号使用: 尽可能使用代码替代:比如 < ( < )、> ( > ) 、空格 ( ) 、» ( » ); a a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点; em,strong em 表示句意强调, 加与不加会引起语义变化, 可用于表示不同的心情或语调; strong 表示重要性强调, 可用于局部或全局, strong强调的是重要性, 不会改变句意; abbr 表示缩写; sub,sup 主要用于数学和化学公式, sup还可用于脚注; span 本身无特殊含义; ins,del 分别表示从文档中增加(插入)和删除。

(13) 媒体元素 img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 给img元素增加alt属性 object/embed 可以用来插入Flash。

(14) 列表元素 dl 表示关联列表,dd是对dt的解释;dt和dd的对应关系比较随意: 一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录; ul 表示无序列表; ol 表示有序列表, 可用于排行榜等; li 表示列表项, 必须是ul/ol的子元素。

(15) 表单元素 推荐使用 button 代替 input, 但必须声明 type,不同浏览器的 type 值不一样; 推荐使用 fieldset, legend 组织表单; 单选或多选 input 建议使用 label 包含; 表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱;

**(16)**文档模板

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample page</title>
        <link rel="stylesheet" href="css_example_url" />
    </head>
    <body>
        <div id="page">
            <div id="header">
                页头
            </div>
            <div id="content">
                主体
            </div>
            <div id="footer">
                页尾
            </div>
        </div>
        <script src="js_example_url"></script>
        <script>
        // 你的代码
        </script>
    </body>
</html>

CSS规范

(1) 命名 使用小写字母,复合词以下划线(_)分隔;例如 nav.css,login_nav.css,login_page.css。

(2) id 和 class 的命名 id 和 class 的命名总规则为: 内容优先,表现为辅. 首先根据内容来命名, 比如 main-nav. 如果根据内容找不到合适的命名, 可以再结合表现来定, 比如 skin-blue, present-tab, col-main; 用于样式的 id 和 class 名称一律小写, 多个单词用连字符连接, 比如 recommend-presents.,名称中只能出现小写的 26 个英文字母、数字和连字符(-), 任何其它字符都严禁出现; id 和 class 尽量用英文单词命名 . 确实找不到合适的单词时, 可以考虑使用产品的中文拼音; 在不影响语义的情况下, id 和 class 名称中可以适当采用英文单词缩写, 比如 col, nav, hd, bd, ft 等, 但切忌自造缩写; id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写, 比如 present, col。

(3) 简写属性名字

/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

(4) 0、0前缀 和 单位 对属性值为 0 的情况省略单位,省略属性值中的 0 前缀。例如:

margin: 0;
padding: 0;
font-size: .8em;

(5) CSS3兼容书写形式

.selector { 
  -webkit-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
     -moz-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
          box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
}

(6) 注释

成组的 css 规则间用块状注释和空行分离

/* Header */
#login-header {}
#login-header-below {}
/* Footer */
#login-footer {}
#login-footer-below {}
/* Gallery */
.login-gallery {}
.login-gallery-other {}

(7) 特别注意 避免滥用CSS Hack; 使用after或overflow的方式清浮动,不要在html里增加多余的标签; CSS尽可能的放在head里; 避免使用filter、expression、@import、!important; 避免直接定义标签的样式。如: div { ... }; 避免在标签上直接写样式; 绝对不要在CSS中使用“*”选择符; 内联和外联的CSS都必须放在页面的head里。

© 著作权归作者所有

共有 人打赏支持
阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
前端开发规范之React应用使用ESLint

现代前端技术飞速发展,最终形成了以效率和质量为核心的两大趋势。就效率而言,在大型前端项目的开发中,规范的制定、框架的出现与升级、构建的使用更新、组件化的设计实现等都在于前端能更快...

sinat_17775997 ⋅ 2017/12/23 ⋅ 0

前端协作流程

Web系统   在介绍协作流程之前,首先简单地了解Web系统的结构   从宏观上来说,Web系统是部署在服务器上用于为web客户端提供服务的系统。不同的Web客户端根据不同的需求,发送请求到服务...

sshpp ⋅ 2017/07/24 ⋅ 0

思考阿里巴巴系的前端解决方案

题记:你有解决问题的能力,却没有解决问题的方法 前端是用户体验的基础,是用户最先体验的服务。由于最近在开发购物分享网站食美特,经历了很多前端的麻烦。学习和参考了很多前端解决方案,...

smeite ⋅ 2013/03/17 ⋅ 0

【Web规范】前端开发规范细则(更新中...)

参考列表: 教你怎样对word文档进行排版(表要笑话我,排版是基础中的基础,不然乱七八糟的文档让别人乍看哦) W3C标准 关于团队合作的css命名规范 Web前端开发规范文档 Web前端开发规范手册...

小小M ⋅ 2014/02/18 ⋅ 0

史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp ⋅ 2017/01/13 ⋅ 0

web前端开发工具

web前端开发工具 postman 谷歌浏览器插件;是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件 FeHelper 谷歌浏览器插件;包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式...

小寶 ⋅ 2015/10/29 ⋅ 0

一稿设计,多端适配优雅的解决方案 - rem

规范目的 为提高前端团队开发效率,输出高质量的前端页面代码,提高UI设计还原度,特编写该规范文档。本文档如有不对或者不合适的地方请及时提出。 JS代码块 使用方法 ui设计师设计界面时建议...

愿爱无忧dk_ ⋅ 04/08 ⋅ 0

学习前端推荐书

学习前端推荐书 作为一名前端开发人员,如果你告诉我你没有看过任何关于前端的书籍,那么我完全可以认为你不是一名合格的前端开发工程师。为什么我要以“看书”来衡量合格前端的标准?因为前...

MyDear宸 ⋅ 2017/05/16 ⋅ 0

前端开发文档(参考手册,开源书籍)

前端开发文档 前端开发文档包含前端技术(HTML.CSS,JS)的参考手册,前端编码规范,以及整理前端开源的一些书籍。 访问地址:http://f2edocs.com 当前版本 V0.1 持续更新中... 参考、使用的项目...

郭小铭 ⋅ 2015/10/07 ⋅ 2

开发资源帖

后端开发必备 MySQL - http://www.w3school.com.cn/php/phpmysqlintro.asp 后端开发加速 ThinkPHP 3.2 官方手册 - http://document.thinkphp.cn/manual32.html#autoloadThinkPHP 3.1 官方手册......

林玮晶 ⋅ 2015/04/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 28分钟前 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部