Good article
Introduction sub-title
This is a good example for HTML semantics
資訊專欄INFORMATION COLUMN
摘要：小駝峰式命名法首字母小寫。文件資源命名文件名不得含有空格文件名建議只使用小寫字母，不使用大寫字母。可執(zhí)行不可執(zhí)行判斷是否含有某個(gè)值函數(shù)返回一個(gè)布爾值。使用文檔聲明類型的作用是為了防止開啟瀏覽器的怪異模式。
本文首發(fā)于我的個(gè)人網(wǎng)站：http://cherryblog.site/ （背景更換了不知道大家有沒有發(fā)現(xiàn)呢，嘻嘻）
一個(gè)好的程序員肯定是要能書寫可維護(hù)的代碼，而不是一次性的代碼，怎么能讓團(tuán)隊(duì)當(dāng)中其他人甚至一段時(shí)間時(shí)候你再看你某個(gè)時(shí)候?qū)懙拇a也能看懂呢，這就需要規(guī)范你的代碼了。
我是有一點(diǎn)強(qiáng)迫癥的人，上周我們后端給我了一個(gè)CanUsename的接口（該接口的目的是判斷輸入的目的地是否是4級目的地），我真的是崩潰的。
我只是覺得這個(gè)名字不夠語義化，但是讓我自己想一個(gè)名字我又想不出來，于是我就在想，如果有一套命名規(guī)范的話，那么以后起名字就不用發(fā)愁了，直接按照規(guī)范來就好了~
于是端午在家就百度了一下~
Pascal Case 大駝峰式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo
Camel Case 小駝峰式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo
文件資源命名文件名不得含有空格
文件名建議只使用小寫字母，不使用大寫字母。( 為了醒目，某些說明文件的文件名，可以使用大寫字母，比如README、LICENSE。 )
文件名包含多個(gè)單詞時(shí)，單詞之間建議使用半角的連詞線 ( - ) 分隔。
引入資源使用相對路徑，不要指定資源所帶的具體協(xié)議 ( http:, https: ) ，除非這兩者協(xié)議都不可用。
不推薦：
推薦
變量命名命名方式 : 小駝峰式命名方法
命名規(guī)范 : 類型+對象描述的方式，如果沒有明確的類型，就可以使前綴為名詞
| 類型 | 小寫字母 |
|---|---|
| array | a |
| boolean | b |
| function | fn |
| int | i |
| object | o |
| regular | r |
| string | s |
推薦
var tableTitle = "LoginTable"
不推薦
var getTitle = "LoginTable"函數(shù)
命名方式 : 小駝峰方式 ( 構(gòu)造函數(shù)使用大駝峰命名法 )
命名規(guī)則 : 前綴為動詞
| 動詞 | 含義 | 返回值 |
|---|---|---|
| can | 判斷是否可執(zhí)行某個(gè)動作 ( 權(quán)限 ) | 函數(shù)返回一個(gè)布爾值。true：可執(zhí)行；false：不可執(zhí)行 |
| has | 判斷是否含有某個(gè)值 | 函數(shù)返回一個(gè)布爾值。true：含有此值；false：不含有此值 |
| is | 判斷是否為某個(gè)值 | 函數(shù)返回一個(gè)布爾值。true：為某個(gè)值；false：不為某個(gè)值 |
| get | 獲取某個(gè)值 | 函數(shù)返回一個(gè)非布爾值 |
| set | 設(shè)置某個(gè)值 | 無返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄ο?/td> |
推薦：
//是否可閱讀
function canRead(){
return true;
}
//獲取姓名
function getName{
return this.name
}
常量
命名方法 : 全部大寫
命名規(guī)范 : 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。
推薦：
var MAX_COUNT = 10; var URL = "http://www.baidu.com";類的成員
公共屬性和方法 : 同變量命名方式
私有屬性和方法 : 前綴為下劃線(_)后面跟公共屬性和方法一樣的命名方式
推薦(將name換成this是不是更熟悉了呢)
function Student(name) {
var _name = name; // 私有成員
// 公共方法
this.getName = function () {
return _name;
}
// 公共方式
this.setName = function (value) {
_name = value;
}
}
var st = new Student("tom");
st.setName("jerry");
console.log(st.getName()); // => jerry：輸出_name私有變量的值
注釋規(guī)范
單行注釋 ( // )
多帶帶一行：//(雙斜線)與注釋文字之間保留一個(gè)空格
在代碼后面添加注釋：//(雙斜線)與代碼之間保留一個(gè)空格，并且//(雙斜線)與注釋文字之間保留一個(gè)空格。
注釋代碼：//(雙斜線)與代碼之間保留一個(gè)空格。
推薦 :
// 調(diào)用了一個(gè)函數(shù)；1)多帶帶在一行 setTitle(); var maxCount = 10; // 設(shè)置最大量；2)在代碼后面注釋 // setName(); // 3)注釋代碼多行注釋 ( / 注釋說明 / )
若開始(/*和結(jié)束(*/)都在一行，推薦采用單行注釋
若至少三行注釋時(shí)，第一行為/*，最后行為*/，其他行以*開始，并且注釋文字與*保留一個(gè)空格。
推薦 :
/* * 代碼執(zhí)行到這里后會調(diào)用setTitle()函數(shù) * setTitle()：設(shè)置title的值 */ setTitle();函數(shù) ( 方法 ) 注釋
函數(shù)(方法)注釋也是多行注釋的一種，但是包含了特殊的注釋要求，參照 javadoc(百度百科)
語法：
/** * 函數(shù)說明 * @關(guān)鍵字 */
常用注釋關(guān)鍵字
| 注釋名 | 語法 | 含義 | 示例 |
|---|---|---|---|
| @param | @param 參數(shù)名 {參數(shù)類型} 描述信息 | 描述參數(shù)的信息 | @param name {String} 傳入名稱 |
| @return | @return {返回類型} 描述信息 | 描述返回值的信息 | @return {Boolean} true:可執(zhí)行;false:不可執(zhí)行 |
| @author | @author 作者信息 [附屬信息：如郵箱、日期] | 描述此函數(shù)作者的信息 | @author 張三 2015/07/21 |
| @version | @version XX.XX.XX | 描述此函數(shù)的版本號 | @version 1.0.3 |
| @example | @example 示例代碼 | @example setTitle("測試") |
推薦 :
/**
- 合并Grid的行
- @param grid {Ext.Grid.Panel} 需要合并的Grid
- @param cols {Array} 需要合并列的Index(序號)數(shù)組；從0開始計(jì)數(shù)，序號也包含。
- @param isAllSome {Boolean} ：是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true：完成一樣；false(默認(rèn))：不完全一樣
- @return void
- @author polk6 2015/07/21
- @example
- _________________ _________________
- | 年齡 | 姓名 | | 年齡 | 姓名 |
- ----------------- mergeCells(grid,[0]) -----------------
- | 18 | 張三 | => | | 張三 |
- ----------------- - 18 ---------
- | 18 | 王五 | | | 王五 |
- ----------------- -----------------
*/
function mergeCells(grid, cols, isAllSome) {
// Do Something
}
HTML規(guī)范
文檔規(guī)范
使用 HTML5 的文檔聲明類型 :
DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔。
使用文檔聲明類型的作用是為了防止開啟瀏覽器的怪異模式。
沒有DOCTYPE文檔類型聲明會開啟瀏覽器的怪異模式，瀏覽器會按照自己的解析方式渲染頁面，在不同的瀏覽器下面會有不同的樣式。
如果你的頁面添加了那么，那么就等同于開啟了標(biāo)準(zhǔn)模式。瀏覽器會按照W3C標(biāo)準(zhǔn)解析渲染頁面。
腳本加載說到j(luò)s和css的位置，大家應(yīng)該都知道js放在下面，css放在上面。
但是，如果你的項(xiàng)目只需要兼容ie10+或者只是在移動端訪問，那么可以使用HTML5的新屬性async，將腳本文件放在內(nèi)
兼容老舊瀏覽器(IE9-)時(shí)：
腳本引用寫在 body 結(jié)束標(biāo)簽之前，并帶上 async 屬性。這雖然在老舊瀏覽器中不會異步加載腳本，但它只阻塞了 body 結(jié)束標(biāo)簽之前的 DOM 解析，這就大大降低了其阻塞影響。
而在現(xiàn)代瀏覽器中：
腳本將在 DOM 解析器發(fā)現(xiàn) body 尾部的 script 標(biāo)簽才進(jìn)行加載，此時(shí)加載屬于異步加載，不會阻塞 CSSOM（但其執(zhí)行仍發(fā)生在 CSSOM 之后）。
綜上所述，
所有瀏覽器中推薦:
只兼容現(xiàn)代瀏覽器推薦:
語義化
我們一直都在說語義化編程，語義化編程，但是在代碼中很少有人完全使用正確的元素。使用語義化標(biāo)簽也是有理由SEO的。
語義化是指：根據(jù)元素其被創(chuàng)造出來時(shí)的初始意義來使用它。
意思就是用正確的標(biāo)簽干正確的事，而不是只有div和span。
不推薦：
My page titleAll news articlesBad article
Introduction sub-titleThis is a very bad example for HTML semanticsI think I"m more on the side and should not receive the main creditsThis article was created by David2014-01-01 00:00
推薦
html 代碼:alt標(biāo)簽不為空My page title
All news articles
This is a good example for HTML semantics
See the square next to me?
推薦
html 代碼:
See the square next to me?
css 代碼:
/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: url(square.svg) no-repeat;
background-size: 100%;
}
js規(guī)范
避免全局命名空間污染
防止全局命名空間被污染，我們通常的做法是將代碼包裹成一個(gè) IIFE(Immediately-Invoked Function Expression)，創(chuàng)建獨(dú)立隔絕的定義域。也使得內(nèi)存在執(zhí)行完后立即釋放。
IIFE 還可確保你的代碼不會輕易被其它全局命名空間里的代碼所修改（i.e. 第三方庫，window 引用，被覆蓋的未定義的關(guān)鍵字等等）。
不推薦:
var x = 10,
y = 100;
// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + " " + window.y);
推薦
// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
"use strict";
var x = 10,
y = 100;
// Will output "true true"
log((w.x === undefined) + " " + (w.y === undefined));
}(window.console.log, window));
推薦的IIFE寫法:
(function(){
"use strict";
// Code goes here
}());
如果你想引用全局變量或者是外層 IIFE 的變量，可以通過下列方式傳參：
(function($, w, d){
"use strict";
$(function() {
w.alert(d.querySelectorAll("div").length);
});
}(jQuery, window, document));
嚴(yán)格模式
ECMAScript 5 嚴(yán)格模式可在整個(gè)腳本或獨(dú)個(gè)方法內(nèi)被激活。它對應(yīng)不同的 javascript 語境會做更加嚴(yán)格的錯(cuò)誤檢查。嚴(yán)格模式也確保了 javascript 代碼更加的健壯，運(yùn)行的也更加快速。
嚴(yán)格模式會阻止使用在未來很可能被引入的預(yù)留關(guān)鍵字。
你應(yīng)該在你的腳本中啟用嚴(yán)格模式，最好是在獨(dú)立的 IIFE 中應(yīng)用它。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動了嚴(yán)格模式，這有可能會引發(fā)一些第三方類庫的問題。
變量聲明總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，例如
var a = b = 0; //b會被隱式的創(chuàng)建為全局變量
所以，請總是使用 var 來聲明變量，并且使用單var模式（將所有的變量在函數(shù)最前面只使用一個(gè)var定義）。例如：
(function (){
"use strict"
var a = 0,
b = 0,
c = 0,
i,
j,
myObject();
}())
采用嚴(yán)格模式帶來的好處是，當(dāng)你手誤輸入錯(cuò)誤的變量名時(shí)，它可以通過報(bào)錯(cuò)信息來幫助你定位錯(cuò)誤出處。
js聲明提前javascript會自動將函數(shù)作用域內(nèi)的變量和方法的定義提前（只是提前聲明，賦值還是在原處）
例如：
(function(log){
"use strict";
var a = 10;
for(var i = 0; i < a; i++) {
var b = i * i;
log(b);
}
if(a === 10) {
var f = function() {
log(a);
};
f();
}
function x() {
log("Mr. X!");
}
x();
}(window.console.log));
提升后的js
(function(log){
"use strict";
// All variables used in the closure will be hoisted to the top of the function
var a,
i,
b,
f;
// All functions in the closure will be hoisted to the top
function x() {
log("Mr. X!");
}
a = 10;
for(i = 0; i < a; i++) {
b = i * i;
log(b);
}
if(a === 10) {
// Function assignments will only result in hoisted variables but the function body will not be hoisted
// Only by using a real function declaration the whole function will be hoisted with its body
f = function() {
log(a);
};
f();
}
x();
}(window.console.log));
使用嚴(yán)格等
總是使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強(qiáng)制類型轉(zhuǎn)換所造成的困擾。例如：
(function(log){
"use strict";
log("0" == 0); // true
log("" == false); // true
log("1" == true); // true
log(null == undefined); // true
var x = {
valueOf: function() {
return "X";
}
};
log(x == "X");
}(window.console.log));
等同== 和嚴(yán)格等===的區(qū)別
==， 兩邊值類型不同的時(shí)候，要先進(jìn)行類型轉(zhuǎn)換，再比較。
===，不做類型轉(zhuǎn)換，類型不同的一定不等。
==等同操作符
如果兩個(gè)值具有相同類型，會進(jìn)行===比較，返回===的比較值
如果兩個(gè)值不具有相同類型，也有可能返回true
如果一個(gè)值是null另一個(gè)值是undefined，返回true
如果一個(gè)值是string另個(gè)是number，會把string轉(zhuǎn)換成number再進(jìn)行比較
如果一個(gè)值是true，會把它轉(zhuǎn)成1再比較，false會轉(zhuǎn)成0
console.log( false == null ) // false console.log( false == undefined ) // false console.log( false == 0 ) // true console.log( false == "" ) // true console.log( false == NaN ) // false console.log( null == undefined ) // true console.log( null == 0 ) // false console.log( null == "" ) // false console.log( null == NaN ) // false console.log( undefined == 0) // false console.log( undefined == "") // false console.log( undefined == NaN) // false console.log( 0 == "" ) // true console.log( 0 == NaN ) // false
總結(jié)一下==
false 除了和自身比較為 true 外，和 0，"" 比較也為 true
null 只和 undefined 比較時(shí)為 true， 反過來 undefined 也僅和 null 比較為 true，沒有第二個(gè)
0 除了和 false 比較為 true，還有空字符串 """ 和空數(shù)組 []
空字符串 "" 除了和 false 比較為 true，還有一個(gè)數(shù)字 0
==, >, <, +, -, ... 這些操作符所造成的隱式類型轉(zhuǎn)換都是無副作用的，它不會改變變量本身保存的值。，但是，如果你覆寫某個(gè)對象的 `valueOf/toString
`的話，==就會產(chǎn)生副作用.
例如：
Array.prototype.valueOf = function() {
this[0]++;
return this;
}
var x = [1, 2, 3];
x == 0;
console.log(x); // [2, 2, 3]
===操作符：
要是兩個(gè)值類型不同，返回false
要是兩個(gè)值都是number類型，并且數(shù)值相同，返回true
要是兩個(gè)值都是stirng，并且兩個(gè)值的String內(nèi)容相同，返回true
要是兩個(gè)值都是true或者都是false，返回true
要是兩個(gè)值都是指向相同的Object，Arraya或者function，返回true
要是兩個(gè)值都是null或者都是undefined，返回true
## 真假判斷
js中以下內(nèi)容為假：
false
null
undefined
"" (空字符串)
NaN
設(shè)置默認(rèn)參數(shù)輯操作符 || 和 && 也可被用來返回布爾值。如果操作對象為非布爾對象，那每個(gè)表達(dá)式將會被自左向右地做真假判斷。基于此操作，最終總有一個(gè)表達(dá)式被返回回來。這在變量賦值時(shí)，是可以用來簡化你的代碼的。例如:如果x不存在且y不存在，x=1；如果x存在y存在，x = y
if(!x) {
if(!y) {
x = 1;
} else {
x = y;
}
}
等同于：
x = x || y || 1;
這一小技巧經(jīng)常用來給方法設(shè)定默認(rèn)的參數(shù)。
(function(log){
"use strict";
function multiply(a, b) {
a = a || 1;
b = b || 1;
log("Result " + a * b);
}
multiply(); // Result 1
multiply(10); // Result 10
multiply(3, NaN); // Result 3
multiply(9, 5); // Result 45
}(window.console.log));
不使用eval()函數(shù)
就如eval的字面意思來說，惡魔，使用eval()函數(shù)會帶來安全隱患。
eval()函數(shù)的作用是返回任意字符串，當(dāng)作js代碼來處理。
只在對象構(gòu)造器、方法和在設(shè)定的閉包中使用 this 關(guān)鍵字。this 的語義在此有些誤導(dǎo)。它時(shí)而指向全局對象（大多數(shù)時(shí)），時(shí)而指向調(diào)用者的定義域（在 eval 中），時(shí)而指向 DOM 樹中的某一節(jié)點(diǎn)（當(dāng)用事件處理綁定到 HTML 屬性上時(shí)），時(shí)而指向一個(gè)新創(chuàng)建的對象（在構(gòu)造器中），還時(shí)而指向其它的一些對象（如果函數(shù)被 call() 和 apply() 執(zhí)行和調(diào)用時(shí)）。
正因?yàn)樗侨绱巳菀椎乇桓沐e(cuò)，請限制它的使用場景：
在構(gòu)造函數(shù)中
在對象的方法中（包括由此創(chuàng)建出的閉包內(nèi)）
首選函數(shù)式風(fēng)格函數(shù)式編程讓你可以簡化代碼并縮減維護(hù)成本，因?yàn)樗菀讖?fù)用，又適當(dāng)?shù)亟怦詈透俚囊蕾嚒?/p>
接下來的例子中，在一組數(shù)字求和的同一問題上，比較了兩種解決方案。第一個(gè)例子是經(jīng)典的程序處理，而第二個(gè)例子則是采用了函數(shù)式編程和 ECMA Script 5.1 的數(shù)組方法。
不推薦
(function(log){
"use strict";
var arr = [10, 3, 7, 9, 100, 20],
sum = 0,
i;
for(i = 0; i < arr.length; i++) {
sum += arr[i];
}
log("The sum of array " + arr + " is: " + sum)
}(window.console.log));
推薦(函數(shù)式編程)：
(function(log){
"use strict";
var arr = [10, 3, 7, 9, 100, 20];
var sum = arr.reduce(function(prevValue, currentValue) {
return prevValue + currentValue;
}, 0);
log("The sum of array " + arr + " is: " + sum);
}(window.console.log));
修改內(nèi)建對象的原型鏈
修改內(nèi)建的諸如 Object.prototype 和 Array.prototype 是被嚴(yán)厲禁止的。修改其它的內(nèi)建對象比如 Function.prototype，雖危害沒那么大，但始終還是會導(dǎo)致在開發(fā)過程中難以 debug 的問題，應(yīng)當(dāng)也要避免。
三元條件判斷（if 的快捷方法）用三元操作符分配或返回語句。在比較簡單的情況下使用，避免在復(fù)雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈。
不推薦：
if(x === 10) {
return "valid";
} else {
return "invalid";
}
推薦：
return x === 10 ? "valid" : "invalid"JSHint
在js規(guī)范中，有很多規(guī)范都是樣式上的規(guī)范而不是邏輯上的規(guī)范，比如盡量使用===而不是==，我們可以使用JSHint或者JSLint，Javascript代碼驗(yàn)證工具，這種工具可以檢查你的代碼并提供相關(guān)的代碼改進(jìn)意見。我個(gè)人使用的是JSHint，所以就以這個(gè)為例
webstorm內(nèi)置JSHint對于ws愛好者來說，我沒有用過其他的編譯器，ws基本上能滿足你的所有需求（最新的ws集成了vue）。
在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint
這些規(guī)范都是什么意思呢，這里列出一些常用的，剩下的大家可以參考官方文檔
| 名稱 | 含義 |
|---|---|
| curly | 循環(huán)或者條件語句必須使用花括號包住 |
| eqeqeq | 使用強(qiáng)制等=== |
| newcap | 對于首字母大寫的函數(shù)（聲明的類），強(qiáng)制使用new |
| noarg | 禁用arguments.caller和arguments.callee |
| sub | 對于屬性使用aaa.bbb而不是aaa["bbb"] |
| undef | 查找所有未定義的變量 |
| boss | 查找類似與if(a = 0)這樣的代碼 |
| node | 指定運(yùn)行環(huán)境為node |
| strict | 必須使用嚴(yán)格模式 |
| asi | 允許省略分號 |
| bitwise | 禁止使用位運(yùn)算符，比如經(jīng)常把&&寫錯(cuò)& 規(guī)避此錯(cuò)誤 |
| jquery | 定義全局暴露的jQuery庫 |
| evil | 禁止使用eval |
| maxdepth | 嵌套的最大深度 |
| maxparams | 參數(shù)的最大個(gè)數(shù) |
ID和class的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱
不推薦 :
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推薦 :
.heavy {
font-weight: 800;
}
.important {
color: red;
}
合理的使用ID
一般情況下ID不應(yīng)該被用于樣式，并且ID的權(quán)重很高，所以不使用ID解決樣式的問題，而是使用class
不推薦：
#content .title {
font-size: 2em;
}
推薦：
.content .title {
font-size: 2em;
}
css選擇器中避免使用標(biāo)簽名
從結(jié)構(gòu)、表現(xiàn)、行為分離的原則來看，應(yīng)該盡量避免css中出現(xiàn)HTML標(biāo)簽，并且在css選擇器中出現(xiàn)標(biāo)簽名會存在潛在的問題。
使用子選擇器很多前端開發(fā)人員寫選擇器鏈的時(shí)候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。
有時(shí)，這可能會導(dǎo)致疼痛的設(shè)計(jì)問題并且有時(shí)候可能會很耗性能。
然而，在任何情況下，這是一個(gè)非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選擇器， 你應(yīng)該總是考慮直接子選擇器。
不推薦:
.content .title {
font-size: 2rem;
}
推薦
.content > .title {
font-size: 2rem;
}
盡量使用縮寫屬性
盡量使用縮寫屬性對于代碼效率和可讀性是很有用的，比如font屬性。
不推薦：
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
推薦：
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;0后面不帶單位
省略0后面的單位，
不推薦：
padding-bottom: 0px; margin: 0em;
推薦：
padding-bottom: 0; margin: 0;屬性格式
為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號結(jié)束，每個(gè)聲明換行。
屬性名的冒號后使用一個(gè)空格。出于一致性的原因，
屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個(gè)空格。
每個(gè)選擇器和屬性聲明總是使用新的一行。
屬性選擇器或?qū)傩灾涤秒p引號（””），而不是單引號（”）括起來。
URI值（url()）不要使用引號。
作為最佳實(shí)踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：
結(jié)構(gòu)性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現(xiàn)性屬性：
background, border etc.
font, text
不推薦：
.box {
font-family: "Arial", sans-serif;
border: 3px solid #ffffd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}
推薦：
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ffffd;
font-family: "Arial", sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}
相關(guān)文章：
前端編碼規(guī)范
JavsScript開發(fā)規(guī)范、
開發(fā)規(guī)范（四）JS規(guī)范
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83303.html
摘要：雜項(xiàng)用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量不要在同個(gè) 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項(xiàng)目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項(xiàng)用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量不要在同個(gè) 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項(xiàng)目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項(xiàng)用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量不要在同個(gè) 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項(xiàng)目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：文檔規(guī)范和文檔必須采用編碼格式文檔必須使用的標(biāo)準(zhǔn)文檔格式編寫規(guī)范和的標(biāo)簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結(jié)構(gòu)清晰，必須合理的進(jìn)行代碼縮進(jìn)文件禁止樣式表內(nèi)引用文件編寫格式，樣式代碼保持一行，多個(gè)選擇器 HTMLCSS文檔規(guī)范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標(biāo)準(zhǔn)文檔格式； HTMLCSS編寫規(guī)范...
摘要：文檔規(guī)范和文檔必須采用編碼格式文檔必須使用的標(biāo)準(zhǔn)文檔格式編寫規(guī)范和的標(biāo)簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結(jié)構(gòu)清晰，必須合理的進(jìn)行代碼縮進(jìn)文件禁止樣式表內(nèi)引用文件編寫格式，樣式代碼保持一行，多個(gè)選擇器 HTMLCSS文檔規(guī)范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標(biāo)準(zhǔn)文檔格式； HTMLCSS編寫規(guī)范...
閱讀 1368·2021-11-24 09:39
閱讀 1358·2021-11-04 16:12
閱讀 2701·2021-09-24 09:47
閱讀 3346·2021-09-01 10:50
閱讀 1487·2019-08-30 15:55
閱讀 1432·2019-08-30 15:43
閱讀 652·2019-08-30 11:08
閱讀 3588·2019-08-23 18:33
