1. 說(shuō)一說(shuō)你平時(shí)寫(xiě)代碼遵守的編碼規(guī)范
語(yǔ)法
- 用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
- 為選擇器分組時(shí)，將單獨(dú)的選擇器單獨(dú)放在一行。
- 為了代碼的易讀性，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格。
- 聲明塊的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行。
- 每條聲明語(yǔ)句的
:后應(yīng)該插入一個(gè)空格。 - 為了獲得更準(zhǔn)確的錯(cuò)誤報(bào)告，每條聲明都應(yīng)該獨(dú)占一行。
- 所有聲明語(yǔ)句都應(yīng)當(dāng)以分號(hào)結(jié)尾。最后一條聲明語(yǔ)句后面的分號(hào)是可選的，但是，如果省略這個(gè)分號(hào)，你的代碼可能更易出錯(cuò)。
- 對(duì)于以逗號(hào)分隔的屬性值，每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格（例如，
box-shadow）。 - 不要在
rgb()、rgba()、hsl()、hsla()或rect()值的內(nèi)部 的逗號(hào)后面插入空格。這樣利于從多個(gè)屬性值（既加逗號(hào)也加空格）中區(qū)分多個(gè)顏色值（只加逗號(hào)，不加空格）。 - 對(duì)于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，
.5代替0.5；-.5px代替-0.5px）。 - 十六進(jìn)制值應(yīng)該全部小寫(xiě)，例如，
#fff。在掃描文檔時(shí)，小寫(xiě)字符易于分辨，因?yàn)樗麄兊男问礁子趨^(qū)分。 - 盡量使用簡(jiǎn)寫(xiě)形式的十六進(jìn)制值，例如，用
#fff代替#ffffff。 - 為選擇器中的屬性添加雙引號(hào)，例如，
input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號(hào)。 - 避免為 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:0px 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;
}
聲明順序
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組，并按照下面的順序排列：
- Positioning
- Box model
- Typographic
- Visual
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關(guān)的樣式，因此排在首位。盒模型排在第二位，因?yàn)樗鼪Q定了組件的尺寸和位置。
其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性，因此排在后面。
declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
