1 前言HTML 作為描述網(wǎng)頁結(jié)構(gòu)的超文本標記語言，一直有著廣泛的應用。本文檔的目標是使 HTML 代碼風格保持一致,，容易被理解和被維護,。 2 代碼風格2.1 縮進與換行[強制] 使用 |
| { $item.name } |
| { $item.name } |
CSS書寫順序
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS縮寫屬性
去掉小數(shù)點前的“0”
16進制顏色代碼縮寫
簡寫類名，但前提是要讓人看懂你的命名才能簡寫
連字符CSS選擇器命名規(guī)范
1.長名稱或詞組可以使用中橫線來為選擇器命名,。
2.不建議使用“_”下劃線來命名CSS選擇器,，為什么呢?
輸入的時候少按一個shift鍵;
瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的);
能良好區(qū)分JavaScript變量命名JS變量命名是用“_”
不要隨意使用Id
id在JS是唯一的,，不能多次使用,，而使用class類選擇器卻可以重復使用，另外id的優(yōu)先級優(yōu)先與class,，所以id應該按需使用
為選擇器添加狀態(tài)前綴
有時候可以給選擇器添加一個表示狀態(tài)的前綴,，讓語義更明了，比如下圖是添加了“.is-”前綴
減少選擇器層級,，選擇器的嵌套最好不要超過三層,，合理使用命名空間，避免命名沖突
.header .logo .text{} 可以優(yōu)化成 .haeder .logo-text{}
盡量不使用 !important 聲明
當需要強制指定樣式且不允許任何場景覆蓋時,，通過標簽內(nèi)聯(lián)和 !important 定義樣式,。
利用CSS繼承減少代碼量
常見的可以繼承的屬性比如： color，font-size,，font-family等等
不可繼承的比如： position,，display，float等
不濫用浮動
雖然浮動不可避免,，但不可否認很多css bug是由于浮動而引起,。CSS Lint一旦檢測出樣式文件中有超過10次的浮動便會提示警告。
這是一份旨在增強團隊的開發(fā)協(xié)作,，提高代碼質(zhì)量和打造開發(fā)基石的編碼風格規(guī)范,，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道,，當一個團隊開始指定并實行編碼規(guī)范的話,，錯誤就會變得更加顯而易見。如果一段特定的代碼不符合規(guī)范的話,，它有可能只是代碼風格錯誤,，而也有可能會是 bug。早期指定規(guī)范就使得代碼審核得以更好的開展,，并且可以更精確的地定位到錯誤,。只要開發(fā)者們能夠保證源代碼源文件都嚴格遵循規(guī)范,，那接下去所使用的混淆、壓縮和編譯工具則可投其所好不盡相同,。
命名
(1) 變量, 使用 Camel 命名法(駝峰命名法)。
// 推薦的命名 var isHotel, isHotelBeijing, // 不推薦的命名 var is_Hotel, ishotelbeijing,(2) 私有屬性,、變量和方法以下劃線 開頭,。
var _privateProperty
(3) 常量, 使用全部字母大寫，單詞間下劃線()分隔的命名方式,通常用于ajax請求url,，和一些不會改變的數(shù)據(jù)
var PLACE_TYPE = 'hotel';
(4) 函數(shù),，使用 Camel 命名法, 函數(shù)的參數(shù), 使用 Camel 命名法。
(5) 類,，使用 Pascal 命名法,即采用駱駝峰的命名且首字母大寫; 類的 方法 / 屬性, 使用 Camel 命名法
如：
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
命名語法
(1) 類名,，使用名詞。
function Engine(options) {}
(2) 函數(shù)名,，使用動賓短語,。
function getStyle(element) {}
(3) boolean 類型的變量使用 is 或 has 開頭。
var isReady = false;
var hasMoreCommands = false;
(4) Promise 對象用動賓短語的進行時表達,。
var loadingData = ajax.get('url');
loadingData.then(callback);
注釋
原則：
a) As short as possible（如無必要,，勿增注釋）：盡量提高代碼本身的清晰性、可讀性,。
b) As long as necessary（如有必要,，盡量詳盡）：合理的注釋、空行排版等,，可以讓代碼更易閱讀,、更具美感。
(1) 單行注釋：必須獨占一行,。// 后跟一個空格,，縮進與下一行被注釋說明的代碼一致。
(2) 多行注釋：避免使用 /.../ 這樣的多行注釋,。有多行注釋內(nèi)容時,，使用多個單行注釋。
(3) 函數(shù)/方法注釋
函數(shù)/方法注釋必須包含函數(shù)說明,，有參數(shù)和返回值時必須使用注釋標識,。；
參數(shù)和返回值注釋必須包含類型信息和說明,；
當函數(shù)是內(nèi)部函數(shù),，外部不可訪問時，可以使用 @inner 標識,；
1. /**2. * 函數(shù)描述3. *4. * @param {string} p1 參數(shù)1的說明5. * @param {string} p2 參數(shù)2的說明,，比較長6. * 那就換行了.7. * @param {number=} p3 參數(shù)3的說明（可選）8. * @return {Object} 返回值描述9. */10. function foo(p1, p2, p3) {11. var p3 = p3 || 10;12. return {13. p1: p1,14. p2: p2,15. p3: p316. };17. }(4) 文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西,。 應該提供文件的大體內(nèi)容, 它的作者, 依賴關(guān)系和兼容性信息。如下:
/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author [email protected] (Firstname Lastname) * Copyright 2009 Meizu Inc. All Rights Reserved. */變量聲明：
總是使用 var（如果用ES6 則let ） 來聲明變量,。如不指定 var,，變量將被隱式地聲明為全局變量，這將對變量難以控制
在同一個函數(shù)內(nèi)部,，局部變量的聲明必須置于頂端。塊內(nèi)函數(shù)必須用局部變量聲明,，切勿在循環(huán)中創(chuàng)建函數(shù)
// 錯誤的寫法 var call = function(name) { if (name == 'hotel') { function foo() { console.log('hotel foo'); } } foo && foo(); }// 推薦的寫法 var call = function(name) { var foo; if (name == 'hotel') { foo = function() { console.log('hotel foo'); } } foo && foo(); }(1) 分號
總是使用分號,，因為隱式的代碼嵌套會引發(fā)難以察覺的問題。當然我們更要從根本上來杜絕這些問題 ,，給自己的表達式加上分號吧
(2) （禁止）使用eval
eval() 不但混淆語境還很危險,，總會有比這更好、更清晰,、更安全的另一種方案來寫你的代碼,，因此盡量不要使用 evil 函數(shù)；eg:采取$.parseJSON
(3) 除了三目運算,，if,else等（禁止）簡寫
(4) (推薦)使用局部變量緩存反復查找的對象(包括但不限于全局變量,、dom查詢結(jié)果、作用域鏈較深的對象)
// 緩存對象 var getComment = function() { var dom = $('#common-container'), // 緩存dom appendTo = $.appendTo, // 緩存全局變量 data = this.json.data; // 緩存作用域鏈較深的對象 }(5) 當需要緩存this時必須推薦使用self變量進行緩存
// 緩存this function Row(name) { var self = this; self.name = name; $('.row').click(function() { self.getName(); }); } self是一個保留字,，不過用它也沒關(guān)系,。在這里，看個人愛好吧,，可以用_this, that, me等這些詞,，都行，但是團隊開發(fā)的時候統(tǒng)一下比較好,建議大家用self;
(6) （不推薦）超長函數(shù), 當函數(shù)超過100行,，就要想想是否能將函數(shù)拆為兩個或多個函數(shù)
(7) 不要在 Array 上使用 for-in 循環(huán)
for-in 循環(huán)只用于 object/map/hash 的遍歷, 對 Array 用 for-in 循環(huán)有時會出錯. 因為它并不是從 0 到 length - 1 進行遍歷, 而是所有出現(xiàn)在對象及其原型鏈的鍵值,。
// Not recommendedfunction printArray(arr) { for (var key in arr) { print(arr[key]); }}printArray([0,1,2,3]); // This works.var a = new Array(10);printArray(a); // This is wrong.a = document.getElementsByTagName('*');printArray(a); // This is wrong.a = [0,1,2,3];a.buhu = 'wine';printArray(a); // This is wrong again.a = new Array;a[3] = 3;printArray(a); // This is wrong again.//推薦function printArray(arr) { var l = arr.length; for (var i = 0; i < l; i++) { print(arr[i]); }}(8) 操作符始終寫在前一行, 以免分號的隱式插入產(chǎn)生預想不到的問題。
var x = a ? b : c;var y = a ?longButSimpleOperandB : longButSimpleOperandC; var z = a ? moreComplicatedB : moreComplicatedC;. 操作符也是如此：var x = foo.bar(). doSomething(). doSomethingElse();(9) 條件(三元)操作符 (?:)
三元操作符用于替代 if 條件判斷語句,。
// Not recommendedif (val != 0) { return foo();} else { return bar();}// Recommendedreturn val ? foo() : bar();(10) && 和 ||
二元布爾操作符是可短路的, 只有在必要時才會計算到最后一項,。
// Not recommendedfunction foo(opt_win) { var win; if (opt_win) { win = opt_win; } else { win = window; } // ...}if (node) { if (node.kids) { if (node.kids[index]) { foo(node.kids[index]); } }}// Recommendedfunction foo(opt_win) { var win = opt_win || window; // ...}var kid = node && node.kids && node.kids[index];if (kid) { foo(kid);}(11) 修改內(nèi)建對象的原型鏈
修改內(nèi)建的諸如 Object.prototype 和 Array.prototype 是被嚴厲禁止的。修改其它的內(nèi)建對象比如 Function.prototype,，雖危害沒那么大,，但始終還是會導致在開發(fā)過程中難以 debug 的問題，應當也要避免,。
(12) 圓括號
一般在語法和語義上真正需要時才謹慎地使用圓括號,。不要用在一元操作符上，例如 delete, typeof 和 void,，或在關(guān)鍵字之后,，例如 return, throw, case, new 等,。
(13) 字符串
統(tǒng)一使用單引號(‘)，不使用雙引號(“),。這在創(chuàng)建 HTML 字符串非常有好處：
var msg = 'This is some HTML ';(14) 自定義 toString() 方法
你可以通過自定義 toString() 來控制對象字符串化,。這很好，但你必須保證你的方法總是成功并不會有其它副作用,。如果你的方法達不到這樣的標準,，那將會引發(fā)嚴重的問題。如果 toString() 調(diào)用了一個方法,，這個方法做了一個斷言[3] ,，當斷言失敗，它可能會輸出它所在對象的名稱,，當然對象也需要調(diào)用 toString()
(15) 異常
基本上你無法避免出現(xiàn)異常,，特別是在做大型開發(fā)時（使用應用開發(fā)框架等等）。在沒有自定義異常的情況下,，從有返回值的函數(shù)中返回錯誤信息一定非常的棘手,，更別提多不優(yōu)雅了。不好的解決方案包括了傳第一個引用類型來接納錯誤信息,，或總是返回一個對象列表,，其中包含著可能的錯誤對象。以上方式基本上是比較簡陋的異常處理方式,。適時可做自定義異常處理,。在復雜的環(huán)境中，你可以考慮拋出對象而不僅僅是字符串（默認的拋出值）,。
|
|
來自： 火騎士大大 > 《CSS代碼規(guī)范》
