代碼組織
- 以組件為單位組織代碼段，CSS 文件將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動
- 制定一致的注釋規(guī)范，請留出時間來描述組件的工作方式、局限性和構(gòu)建它們的方法。不要讓其它小伙伴 來猜測一段不通用或不明顯的代碼的目的
- 用制表符（tab，4個空格）,通過配置編輯器，可以提供快捷鍵來輸出一致認(rèn)可的注釋模式
css注釋：
/* ================== 組件塊 ============================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
.selector-secondary {
display: block; /* 單行注釋*/
}
.selector-three {
display: span;
}
聲明塊格式
- 選擇器分組時，保持獨立的選擇器占用一行
- 聲明塊的左括號
{前添加一個空格，聲明塊的右括號}應(yīng)單獨成行 - 聲明語句中的
:后應(yīng)添加一個空格，聲明語句應(yīng)以分號;結(jié)尾 - 一般以逗號分隔的屬性值，每個逗號后應(yīng)添加一個空格
-
rgb()、rgba()、hsl()、hsla()或rect()括號內(nèi)的值，逗號分隔，但逗號后不添加一個空格 - 對于屬性值或顏色參數(shù)，不省略小于 1 的小數(shù)前面的 0 （例如，
.5；-.5px） - 十六進制值應(yīng)該全部小寫和盡量簡寫，例如，
#fff代替#ffffff - 避免為 0 值指定單位，例如，用
margin: 0;代替 `margin: 0px``` line-height用倍數(shù)，而不是用24px
/* Not recommended */
.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
}
/* Recommended */
.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;
}
css命名
全局公用樣式使用 G- 前綴(Global)，并遵循 【前綴-大類-小類】 或 【前綴-描述】 的寫法：
.G-btn-a // 按鈕a
.G-icon-link // 圖標(biāo)link
.G-fl // float:left
.G-fr // float:right
補丁樣式使用 P- 前綴(patch)，遵循【前綴-模塊】的寫法：
.P-buyer
.P-banner
使用BEM
BEM是塊（block）、元素（element）、修飾符（modifier）的縮寫，利用不同的區(qū)塊，功能以及樣式來給元素命名。這三個部分使用__與--連接（這里用兩個而不是一個是為了留下用于塊兒的命名）。命名約定的模式如下：
.block{}//代表了更高級別的抽象或組件
.block__element{}//代表 block 的后代，用于形成一個完整的 block 的整體
.block--modifier{}//代表 block 的不同狀態(tài)或不同版本
Class 和 ID
- 使用語義化、通用的命名方式
- 使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線，.box-video
- 避免選擇器嵌套層級過多，盡量少于 3 級
- 出于性能考量，避免選擇器和 Class、ID 疊加使用，如果HTML標(biāo)簽修改了，就要再去修改 CSS 代碼，不利于后期維護
/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}
/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}
聲明順序
相關(guān)屬性應(yīng)為一組，推薦的樣式編寫順序 ：位置/顯示 -> 容器/大小 -> 排版/文本 -> 裝飾
- Positioning
- Box model
- Typographic
- Visual
.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;
}
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關(guān)的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。
其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性，因此排在后面。
url()、屬性選擇符、屬性值使用雙引號
/* Not recommended */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
/* Recommended */
@import url("http://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
.selector[type="text"] {`
}
媒體查詢的位置
將媒體查詢放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
避免過分嵌套
當(dāng)出現(xiàn)多個嵌套的時候容易失去控制，應(yīng)保持不超過一個嵌套
/* ? Avoid: 3 levels of nesting */
.image-frame {
> .description {
/* ... */
> .icon {
/* ... */
}
}
}
/* ? Better: 2 levels */
.image-frame {
> .description { /* ... */ }
> .description > .icon { /* ... */ }
}
不要使用 @import
與 <link> 相比，@import 要慢很多，不光增加額外的請求數(shù)，還會導(dǎo)致不可預(yù)料的問題。
替代辦法：
- 使用多個 元素；
- 通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個 CSS 文件編譯為一個文件；
- 其他 CSS 文件合并工具；
鏈接的樣式順序：
a:link -> a:visited -> a:hover -> a:active
瀏覽器廠商前綴
使用 Autoprefixer 自動添加瀏覽器廠商前綴，編寫 CSS 時不需要添加瀏覽器前綴，直接使用標(biāo)準(zhǔn)的 CSS 編寫。
不使用第三方兼容，對齊，方便閱讀
-webkit-transform: rotate(30deg); //-webkit代表蘋果的Safari瀏覽器及谷歌內(nèi)核識別碼
-moz-transform: rotate(30deg); //-moz代表火狐內(nèi)核識別碼
-ms-transform: rotate(30deg); //-ms代表ie內(nèi)核識別碼
-o-transform: rotate(30deg); //-o代表歐朋【opera】內(nèi)核識別碼
transform: rotate(30deg); //統(tǒng)一標(biāo)識語句
