简要介绍

本文通过参考百度腾讯等前端编码规范(链接建文末),得出个人习惯的编码规范。个人编码规范采用在不影响可读性的情况下能省就省,尽量简洁,不需要就直接去掉。

最佳原则不管是个人编码规范还是团队编码规范,一旦规范制定完毕就应该坚持使用,保持前后规范一致。

笔记通过MarkDown写成,对应的GitHub地址为:https://github.com/xys2015/mdnote

命名规则

项目名称,目录名称,一律采用小写方式,以下划线分割。例如:my_project_name

常见命名推荐:img、js、css、src、dep

通用规范

  • 缩进4个空格。
  • 分号不能省略。
  • UTF-8编码。
  • 换行符使用LF
  • 在文件结尾处,保留一个空行。

HTML编码规范

规范速览

  1. 缩进使用4个空格。
  2. 属性值使用双引号。
  3. 属性名必须使用小写字母。
  4. id、class命名全小写用中划线做分隔符。
  5. 不要在自动闭合标签结尾处使用斜杠。
  6. 文件编码使用UTF-8。
  7. DOCTYPE这样写<!DOCTYPE html>
  8. charset这样写<meta charset="UTF-8">
  9. 引用CSS和JS时不用指明type属性。
  10. 布尔类型的属性,建议不添加属性值。
  11. JS标签引入放在</body>上面。
  12. 同一页面,应避免使用相同的nameid
  13. 对HTML5中规定允许省略的闭合标签,不允许省略闭合标签。

Note: 可以通过配置编辑器,使Tab键相当于4个空格

代码示例

<!DOCTYPE html>
<html>
<head>
<charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="page.css">
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
<input type="checkbox" value="1" checked>
<script src="esl.js"></script>
</body>
</html>

CSS编码规范

规范速览

  1. 缩进4个空格。
  2. 分号不能省略。
  3. UTF-8编码。
  4. 使用双引号。
  5. 选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。
  6. 属性书写顺序:布局方式、位置,尺寸、文本相关、视觉效果。
  7. 当一个rule包含多个selector时,每个选择器声明必须独占一行。
  8. url()函数中的路径不加引号。
  9. 长度为0时须省略单位。
  10. font-family属性中的字体族名称应使用字体的英文Family Name,其中如有空格,须放置在引号中。
  11. 关于空格、缩进规范,参考下面的代码示例。

代码示例

/* 11. 空格、换行 */
.selector {
margin: 0;
padding: 0;
} font-family: Arial, sans-serif; /* 6. 属性书写顺序 */
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden; /* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd; /* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px; /* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
} /* 7. 分组选择换行 */
.post,
.page,
.comment {
line-height: 1.5;
} /* 8. */
body {
background: url(bg.png);
} /* 10.
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
*/
h1 {
font-family: "Microsoft YaHei";
}

JavaScript编码规范

规范速览

  1. 缩进4个空格。
  2. 分号不能省略。
  3. 空格、换行(见代码示例)。
  4. 优先使用单引号。
  5. 变量、函数、参数命名采用驼峰法。构造函数大写第一个字母。常量全大写,下划线连接。
  6. 每个var只能声明一个变量。
  7. 函数(见代码示例)。
  8. 数组、对象最后不要有逗号。

代码示例

// 1缩进 3空格、换行 7函数 8数组
switch (variable) { case '1':
// do...
break; case '2':
// do...
break; default:
// do... } var a = !arr.length;
a++;
a = b + c; if (condition) {
// some statements;
} else {
// some statements;
} while (condition) {
} function funcName() {
} (function() {
// do something
})(); var obj = {
a: 1,
b: 2,
c: 3
}; var func = function () {
}; funcName(); callFunc(a, b); if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
} var task = (function () {
// Code
return result;
})(); // 4. 引号
var str = '我是一个字符串';
var html = '<div class="cls">拼接HTML可以省去双引号转义</div>'; // 5. 命名
var loadingModules = {}; // 变量
var HTML_ENTITY = {}; // 常量
function stringFormat(source) { } // 函数 function hear(theBells) {
} // 参数 function TextNode(options) {
} // 类

参考链接

  1. 百度前端编码规范:https://github.com/ecomfe/spec

  2. 腾讯前端规范:http://alloyteam.github.io/CodeGuide/

  3. 网易编码规范:http://nec.netease.com/

web前端编码规范的更多相关文章

  1. Web前端编码规范[转]

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  2. HTML编码规范 - (WEB前端命名规范)

    HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  3. WEB前端开发规范

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

  4. 前端编码规范(2)—— HTML 规范

    HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...

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

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  6. Web 前端代码规范

    Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...

  7. 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  8. Web前端开发规范文档你需要知道的事

    Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...

  9. WEB前端开发规范文档[转]

    为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...

随机推荐

  1. linux命令之高级使用 du

    du命令:disk usage,顾名思义,是关于目录使用情况的,它的作用就是计算目录大小的. 1. 想看当前目录下所有目录以及子目录的大小: # du -h . “.”代表当前目录下.也可以换成一个明 ...

  2. Ubuntu/Mac彻底解决手机ADB识别问题

    之前写过一篇同样解决手机识别问题的文章(http://www.cnblogs.com/benhero/p/4202967.html) ,不过今天在遇到特殊手机"魅族"!之前的解决方 ...

  3. UVA 12034 Race (递推神马的)

    Disky and Sooma, two of the biggest mega minds of Bangladesh went to a far country. They ate, coded ...

  4. Create a new Docker Machine with the Hyper-V driver

    docker-machine就是docker工具集中提供的用来管理容器化主机的工具,用来管理运行在不同环境的主机,包括:本地虚拟机,远程虚拟机,公有云中的虚拟机都可以通过一个命令统一进行管理. 01. ...

  5. C0304 备份最后一天所有修改的文件

    #! /bin/bash backupfile=backup-$(date +%m-%d-%Y) archive=${1:-$backupfile} # 上边内容, 参数替换 ${} echo $ar ...

  6. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  7. HTML表单页面的运用

    本章目标:掌握表单基本结构<form> 掌握各种表单元素 能理解post和get两种提交方式的区别 本章重点:掌握各种表单元素 本章难点:post和get两种提交方式的区别 一.    H ...

  8. mysql中RAND()随便查询记录效率问题和解决的方法分享

    在我们做开发的中效率一直是个问题,特别是对于非常多大数据量操作,今天我们碰到一个要随机查询数据,一開始我们可能想到最简单的order by rand() 来操作但效率不敢恭维啊 近期因为须要大概研究了 ...

  9. gibhub上搭建个人静态网站介绍

    之前学习过git的基本命令.今天介绍一下github上搭建个人网站的步骤. 在window系统上搭建gibhub个人网站(只能执行html.css和js文件),这就是纯静态页面. 步骤一:注册gith ...

  10. NATS源代码之logger目录

    nats的logger目录文件如下 log.go syslog.go syslog_windows.go 基于golang语言的logger包实现日志功能. Golang的log包短小精悍,可以非常轻 ...