1. 說一說你平時寫代碼遵守的編碼規(guī)范
語法
- 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法架谎。
- 為選擇器分組時婿失，將單獨的選擇器單獨放在一行。
- 為了代碼的易讀性箱玷，在每個聲明塊的左花括號前添加一個空格颖低。
- 聲明塊的右花括號應當單獨成行硕勿。
- 每條聲明語句的
:后應該插入一個空格。 - 為了獲得更準確的錯誤報告枫甲，每條聲明都應該獨占一行。
- 所有聲明語句都應當以分號結(jié)尾扼褪。最后一條聲明語句后面的分號是可選的想幻，但是，如果省略這個分號话浇，你的代碼可能更易出錯脏毯。
- 對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如幔崖，
box-shadow）食店。 - 不要在
rgb()、rgba()赏寇、hsl()吉嫩、hsla()或rect()值的內(nèi)部 的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區(qū)分多個顏色值（只加逗號嗅定，不加空格）自娩。 - 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如渠退，
.5代替0.5忙迁；-.5px代替-0.5px）脐彩。 - 十六進制值應該全部小寫，例如姊扔，
#fff惠奸。在掃描文檔時，小寫字符易于分辨恰梢，因為他們的形式更易于區(qū)分佛南。 - 盡量使用簡寫形式的十六進制值，例如删豺，用
#fff代替#ffffff共虑。 - 為選擇器中的屬性添加雙引號，例如呀页，
input[type="text"]妈拌。只有在某些情況下是可選的，但是蓬蝶，為了代碼的一致性尘分，建議都加上雙引號。 - 避免為 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)的屬性聲明應當歸為一組缓窜，并按照下面的順序排列：
- Positioning
- Box model
- Typographic
- Visual
由于定位（positioning）可以從正常的文檔流中移除元素定续，并且還能覆蓋盒模型（box model）相關(guān)的樣式，因此排在首位禾锤。盒模型排在第二位私股，因為它決定了組件的尺寸和位置。
其他屬性只是影響組件的內(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;
}
