- 代碼組織
- 以組件爲單位組織代碼段；
- 制定一致的註釋規範；
- 組件塊和子組件塊以及聲明塊之間使用一個空行分割，子組件塊之間使用三個空行分割；
- 如果有多個CSS文件，應當按照組件形式而不是按照頁面形式來拆分。因爲頁面可能會被重組，而組件只會被移動；
註釋
在寫代碼之前，要規劃好組件的工作方式，侷限性和構造他們的方法。具體見基本規則。class和id
- 使用語義化、通用的方式命名；
- 使用
連字符命名class和id，不要使用駝峯命名和下劃線； - 避免嵌套層級太多，最好
不要超過3層； - 避免選擇器和class，id疊加使用；
出於性能考量，在沒有必要的情況下避免元素選擇器疊加Class、ID 使用。
元素選擇器和ID、Class混合使用也違反關注分離原則。如果 HTML 標籤修改了，就要再去修改 CSS 代碼，不利於後期維護。
/* 錯誤示範 */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}
/* 正確示範 */
#nav {}
.box-video {}
#username input {}
#example {}
聲明塊的格式
- 選擇分組時，保持獨立的選擇器佔用一行；
- 聲明塊的左括號
{前面加一個空格； - 聲明塊的右括號
}應當單獨成一行； - 聲明句的冒號
:後面應當加一個空格； - 聲明句以分號
;結尾； - 以逗號
,分隔的屬性值，每個逗號後應添加一個空格； - rgb()、rgba()、hsl()、hsla()或 rect()括號內的值，逗號分隔，但逗號後不添加一個空格；
- 對於屬性值或顏色參數，省略小於1的小數前面的0（例如，.5 代替 0.5；-.5px 代替 -0.5px）；
- 十六進制值應該全部小寫和儘量簡寫，例如，#fff 代替 #ffffff；
- 避免爲 0 值指定單位，例如，用
margin: 0;代替margin: 0px;；
/* 錯誤示範 */
.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
}
/* 正確示範 獨立的選擇器 */
.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;
}
- 當使用特定瀏覽器帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便於多行編輯。
.selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
屬性的聲明順序
- Positioning
- Box Model
- Typographic
- Visual
制定此順序的原因：
定位（positioning）可以從正常的文檔流中移除元素，還能夠覆蓋正常的盒模型（box model）的相關樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。
/* 正確示範 */
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}
- 引號的使用
url()，屬性選擇符，屬性值使用雙引號。
/* 錯誤示範 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
/* 正確示範 */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
.selector[type="text"] {
}
- 媒體查詢（media Query）的位置
- 將媒體查詢放在儘可能相關規則的附近，
- 不要將他們打包放在單獨的文件或者文件的底部
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
- 關於
@import和link
不用@import，因爲他很慢，不但增加了額外的請求數，還會導致不可預料的問題
解決方法：
- 使用多個 元素；
- 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯爲一個文件；
- 其他 CSS 文件合併工具；
鏈接樣式的順序
a:link -> a:visited -> a:hover -> a:active
- 組件
從 Components 的角度思考，將網站的模塊都作爲一個獨立的 Components
。
- 組件命名
組件至少使用兩個單詞命名
- 點贊（.like-button）
- 搜索框（.search-form）
!!! 以上規則僅供參考