WEB前端編碼規範

時間 2019-12-07

標籤 web 前端編碼規範欄目 HTML 简体版

原文原文鏈接

1.Naming Project

1.1【強制】項目命名

項目名所有采用小寫方式，如下劃線分隔。

命名規則：

1）物業合夥人javascript

property_partnercss

2）數據可視化html

data_visualjava

1.2【強制】目錄名

目錄名採用駝峯命名方式，首字母小寫；有複數結構時，要採用複數命名法。

命名規則：

1.images（存放圖片文件）；數組

2.styles（存放css文件）；瀏覽器

3.components（存放組件文件）；bash

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 —這是保證代碼在各類環境下顯示一致的惟一方式。app

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

註冊：regsiter

搜索：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
}複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。