View on GitHub

Code-style-guide

WOUQ.com前端代码规范

Download this project as a .zip file Download this project as a tar.gz file

WOQU.com 代码规范

WOQU.com 前端er提供的代码规范约定,覆盖HTML、CSS、JS。

目录

  1. HTML
  2. CSS
  3. JAVASCRIPT

{HTML}

使用语义化标签

使用html5的语义化标签。针对旧版浏览器,引用html5shiv.js进行兼容调整。

<!-- bad -->
<div class="header"></div>
<div class="nav"></div>
<div class="section"></div>
<div class="article"></div>
<div class="footer"></div>

<!-- good -->
<header class="header"></header>
<nav class="nav"></nav>
<section class="content-section"></section>
<article class="article"></article>
<footer class="footer"></footer>

编码

使用utf-8编码方式,指定字符编码的meta必须是head的第一个子元素,原因详解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        ...
    </hed>
    <body>
        ...
    </body>
</html>

title的声明

title必须作为head的直接子元素,并紧随charset声明之后。title中如果包含ascii之外的字符,浏览器需要知道字符编码类型才能进行解码,否则可能导致乱码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我趣旅行</title>
        ...
    </hed>
    <body>
        ...
    </body>
</html>

页面<h1>标签唯一性

一个页面只能有一个h1标签,具体与seo有关。

<!-- bad -->
<h1>我是标题一</h1>
<h1>我是标题二</h1>

<!-- good -->
<h1>我是标题一</h1>
<h2>我是标题二</h2>
...
<h6>我是标题六</h6>

标签嵌套规则

html标签包含块级元素、内联元素,元素的类型决定嵌套的规则。

常见块元素:div、section、ul、li、p、h1~h6等。

常见内联元素:span、a、i、input、label、img等。

<!-- right:块级元素可以内嵌其他块级元素或者内联元素 -->
<div><h1><span></span></h1></div>

<!-- right:内联元素可以内嵌其他内联元素 -->
<a href=""><span></span></a>
<!-- wrong:内联元素不能嵌套其他块级元素 -->
<span><div></div></span>

<!-- wrong:p元素不能内嵌块级元素,类似元素有h1、h2、h3、h4、h5、h6、p、dt -->
<p><div></div></p>
<h1><div></div></h1>
...
<h6><div></div></h6>

<!-- wrong:a标签不能内嵌a标签,这个错误会经常发生,值得重视 -->
<a href="a.html"><a href="a.html"></a></a>
<!-- right:内联元素内嵌块级元素 -->
<a style="display: block;" href=""><div></div></a>

{CSS}

class命名

全小写,使用中横线分割。单词间使用下横线。

/* bad */
.header_left      { xxx }
.headerLeft       { xxx }
.HeaderLeft       { xxx }

/* good */
.header-left      { xxx }
.usa-main         { xxx }
.new_zealand-main { xxx }

id命名

小驼峰写法,中间无中横线或者下横线。

/* bad */
#Logo             { xxx }
#header_logo      { xxx }
#header-logo      { xxx }
#HeaderLogo       { xxx }

/* good */
#logo             { xxx }
#headerLogo       { xxx }
#headerLogoWrap   { xxx }

禁止使用无样式class来hook脚本

禁止为元素定义无样式的class,而作为调用脚本使用。这样会造成页面class定义冗余以及增加维护难度。请使用元素自带属性或自定义属性实现。

// bad
<div class="click-alert"></div>
$('.click-alert').click(function() {});

// good
<div data-action="clickAlert"></div>
$('div[data-action="clickAlert"]').click(function() {});

{JAVASCRIPT}

使用严格模式

在代码中使用严格模式'use strict';,详细参考javascript严格模式详解

'use strict';

arr1 = new Array();          // Error

var arr2 = new Array();      // Success

引号

js全部使用单引号'',拼html模板内使用双引号""

// bad
var param = "string";
var html = head + "<div class='main' data-id='main'></div>" + footer;

// good
var param = 'string';
var html = head + '<div class="main" data-id="main"></div>' + footer;

行末分号

虽然js行末的分号不是必须的,但是为了代码风格统一,以及避免打包压缩带来的不可预测问题(真正会导致上下行解析出问题的token有5个:括号,方括号,正则开头的斜杠,加号,减号。一行开头是括号或者方括号的时候不添加分号会报错。),每行末的分号不可以省略。

js分号工具semi

// bad
var html = head + "<div class='main' data-id='main'></div>" + footer
alert(html)

// error
var num = 1
(function() {
    console.log(num)
})
var str = 'error message'

// good
var html = head + '<div class="main" data-id="main"></div>' + footer;
alert(html);

变量命名

js变量命名使用小驼峰命名法,按照类型进行区分,需要突出属性特征、用途,不要使用不能清晰表达意义的缩略词。

// bad
var lib-name = 'sammy.js';
var lib_name = 'sammy.js';
var LibName  = 'sammy.js';

// good
var libName  = 'sammy.js';
// bad
var slider   = $('#slider');
var side-bar = $('#sideBar');
var side_bar = $('#sideBar');

// good
var $slider  = $('#slider');
var $sideBar = $('#sideBar');
// bad
function get_name() {}
function get-name() {}

// good
function getName() {}
// bad
function superClass() {}

// good
function SuperClass() {}
// bad
var comm = document.getElementById('#comment');

// good
var comment = document.getElementById('#comment');

缩进

空格tap不能混用。如果使用空格,四个空格代替一个缩进的位置。如果使用tap,请设置一个tap代替四个空格的位置长度。