WEB前端编码规范-CSDN博客

1.Naming Project

1.1【强制】项目命名

项目名全部采用小写方式，以下划线分隔。

命名规则：

1）物业合伙人

property_partner

2）数据可视化

data_visual

1.2【强制】目录名

目录名采用驼峰命名方式，首字母小写；有复数结构时，要采用复数命名法。

命名规则：

1.images（存放图片文件）；

2.styles（存放css文件）；

3.components（存放组件文件）；

1.3【强制】JavaScript文件命名

参照项目命名规则。

例: account_model.js

1.4【强制】CSS文件命名

参照项目命名规则。

基本常规命名如下：

基本样式：base.css

框架布局：layout.css

模块样式：module.css

全局样式：global.css

字体样式：font.css

首页样式：index.css

链接样式：link.css

打印样式：print.css

专栏：columns.css

主题：themes.css

头部样式：header.css

底部样式：footer.css

重置/修改默认样式：reset.css

1.5【强制】HTML文件命名

参照项目命名规则。

例：error_report.html

2.HTML

2.1【强制】语法

1）使用四个空格的soft tabs —这是保证代码在各种环境下显示一致的唯一方式。

2）在属性上，使用双引号，不要使用单引号。

3）不要忽略可选的关闭标签（例如，</li>和</body>）。

<!DOCTYPE html>
<html>
<head>
    <title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">

<h1 class="hello-world">Hello, world!</h1>
</body>
</html>复制代码

2.2【强制】HTML文件中id的命名

多个单词组成时，采用驼峰命名方式。

命名规则：

1）页面结构id命名

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sideBar

栏目：column

页面外围控制整体布局宽度：wrapper

2）导航类id命名

导航：nav

主导航：mainNav

子导航：subNav

顶导航：topNav

边导航：sideBar

左导航：leftSideBar

右导航：rightSideBar

菜单：menu

子菜单：subMenu

标题: title

摘要: summary

3）功能类id命名

标志：logo

广告：banner

登陆：login

登录条：loginBar

搜索：search

功能区：shop

标题：title

加入：joinUs

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

2.3【强制】HTML5 doctype

在每个HTML页面开头使用这个简单地doctype来启用标准模式，使其每个浏览器中尽可能一致的展现。虽然doctype不区分大小写，但是按照惯例，doctype大写。

<!DOCTYPE html>
<html>
<head>
</head>
</html>复制代码

2.4【强制】引入CSS和JavaScript

根据HTML5规范,通常在引入CSS和JavaScript时不需要指明type，因为text/css和text/javascript分别是他们的默认值；js最好放在底部引入。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
    /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>复制代码

2.5【推荐】减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使HTML

变得更少。

参考下面的示例:

<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">复制代码

2.6【推荐】使用语义化标签

使用语义化标签，在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；有利于 SEO。如：header、nav、main、section、footer、aside等等。

3.CSS

3.1【强制】语法

1）使用四个空格的soft tabs —这是保证代码在各种环境下显示一致的唯一方式。

2）为了代码的易读性，在每个声明的左括号前增加一个空格。

3）尽可能使用短的十六进制数值，例如使用#fff替代#ffffff。

4）不要为0指明单位，比如使用margin: 0;而不是margin: 0px;。

/* Bad CSS */
.selector,.selector-secondary,.selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector, .selector-secondary, .selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}复制代码

3.2【强制】CSS类名命名规范

多个单词组成时，采用中划线连接方式。

命名规则：

1.如果多人协作，可以考虑使用不同的前缀予以区分：内容fl-content；

2.命名技巧:

(1)

颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }复制代码

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }复制代码

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }复制代码

(4)

标题栏样式,使用”类别+功能”的方式命名,如

.bar-news { }
.bar-product { }复制代码

3.3【强制】属性简写

合理使用属性取值简写，属性简写需要你必须显式设置所有取值。常见的简写滥用包括:

· padding
· margin
· font
· background
· border
· border-radius复制代码

过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

/* Bad example */
.element {
    margin: 0 0 10px;
}

/* Good example */
.element {
    margin-bottom: 10px;
}复制代码

3.5【推荐】选择器

1）使用classes而不是通用元素标签来优化渲染性能。

2）避免在经常出现的组件中使用一些属性选择器,(例如，[class^="..."])。浏览器性能会受到这些情况的影响。

3）减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在3个以内。

4）只在必要的情况下使用后代选择器(例如，没有使用带前缀classes的情况)。

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }复制代码

3.6【推荐】杂项

1）不允许有空的规则

2）去掉小数点前面的0

3）元素选择器用小写字母

4）尽量少用'*'选择器

5）选择器不要超过4层

4.JavaScript

4.1【强制】缩进,分号,单行长度

1）一律使用4个空格

2）语句之后一律以分号结束，不可以省略

3）单行长度，理论上不要超过80列，不过如果编辑器开启soft wrap的话可以不考虑单行长度

4.2【强制】变量命名,声明

1）标准变量采用驼峰标识，使用let声明。

2）常量采用大写字母，下划线连接的方式，使用const声明。

3）构造函数，大写第一个字母。

4）字符串使用单引号。

5）在函数作用域顶部声明变量。

let thisIsMyName;

const MAX_COUNT = 10;

function Person(name) {
    this.name = name
}复制代码

4.3【强制】对象，数组声明

*统一使用字面量声明

// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;

// Good  semi colon 采用 Followed by space 的形式
var team = {
    title: "AlloyTeam",
    count: 25
};
// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);

// Good
var colors = [ "red", "green", "blue" ];
var numbers = [ 1, 2, 3, 4 ];复制代码

4.4【推荐】注释规范

单行注释

1）双斜线后，必须跟注释内容保留一个空格；

2）可独占一行,前边不许有空行,缩进与下一行代码保持一致；

3）可位于一个代码行的末尾，注意这里的格式。

// Good
if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}
var zhangsan = "zhangsan";    // 双斜线距离分号四个空格，双斜线后始终保留一个空格复制代码

多行注释

1）最少三行,格式如下；

2）前边留空一行。

 /*
*注释内容与星标前保留一个空格
*/复制代码

4.5【强制】undefined

1) 永远不要直接使用undefined进行变量判断，使用typeof和字符串’undefined'对变量进行判断。

// Bad
if(person === undefind) {
    doSomething();
}
// Good
if(typeof person === 'undefined') {
doSomething();
doSomethingElse();
}复制代码

4.7【强制】if else花括号前后留有空格

if(condition) {
    doSomething();
} else {
    doSomethingElse();
}复制代码

4.8【强制】条件表达式和等号

1）

使用 ===和 !== 替代 == 和 != 。

2）使用快捷方式:

// Bad
if(name === '') {
    doSomething();
}
// Good
if(name) {
    doSomething();
    doSomethingElse();
}

// Bad
if(name.length > 0) {
    doSomething();
}
// Good
if(name.length) {
    doSomething();
    doSomethingElse();
}复制代码

4.9【推荐】杂项

1）不要混用tab和空格。

2）对上下文this的引用只能使用’_this', 'that', ‘self’其中一个来命名。

3）行尾不要有空白字符。

4）不允许有空的代码块。

5）语句结束后一定要加分号;。

6）不希望其他人修改的函数在名称前加下划线_。

7）花括号前必须有一个空格。

8）使用函数参数默认值。

// Bad
function test(arg) {
    let val = arg || {}
}
// Good
function test(arg = {}) {
    let val = arg
}复制代码