### 編碼 在 css 首行設置文件編碼為 UTF-8。 ```css @charset "UTF-8"; ``` ### class 命名 * class 名稱應當盡可能短，并且意義明確。使用有意義的名稱，使用有組織的或目的明確的名稱，不要使用表現形式的名稱。 * 使用中劃線`（-）`分隔 `class `中的單詞。雖然它很不方便的讓你雙擊選擇，但是它可以增強理解性。另外屬性選擇器`[attribute|=value]` 也能識別中劃線`（-）`，所以最好堅持使用中劃線作為分隔符。 * 基于最近的父 `class` 或基本 `class` 作為新 `class` 的前綴。 * 使用 `.js-*` 的 `class` 來標識行為（與樣式相對），并且不要將這些 `class` 寫有任何的樣式。 #### 不推薦 ```css .red {color:red;} /*無明確含義*/ .slide_hd {} .header .logo {} ``` #### 推薦 ```css .important {color:red;} .slide-hd {} .header-logo {} ``` ### 減少選擇器的嵌套 #### 不推薦 ```css .main ul li a span {} ``` #### 推薦 ```css .main span {} ``` ### 優化選擇器 當構建選擇器時應該使用清晰，準確和有語義的 `class` 名。盡量減少使用標簽選擇器。如果你只關心你的 `class `名，而不是你的代碼元素，這樣會更容易維護。 #### 不推薦 ```css div.content > header.content-header > h2.title { font-size: 2em; } ``` #### 推薦 ```css .content > .content-header > .title { font-size: 2em; } ``` ### 省略 0 后面的單位 ### 使用 16 進制表示顏色值 css 中的顏色值可以使用 16 進制來表示，在可能的情況下，可以進行縮寫，比如：#fff、#000。 ### 媒體查詢的位置 將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。 ### 帶前綴的屬性 當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。 ```css .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); } ``` ### 聲明結束 為了保證一致性和可擴展性，每個聲明應該用分號結束。 ### 多行規則聲明 為了易讀性和便于快速編輯，統一將語句分為多行，即使該樣式只包含一條聲明 ### 中文字體引用 css 中文字體可以用 unicode 格式來表示，比如`“宋體”`可以用 `\5B8B\4F53` 來表示。 ### 對于 sass 的嵌套 在 sass 中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒有任何內容的選擇器。 如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，可以使用常規的 css 選擇器鏈，這將防止您的腳本看起來過于復雜。 當使用 sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序。 * 當前選擇器的 @extend 和 @include * 當前選擇器的樣式屬性 * 父級選擇器的偽類選擇器（:first-letter，:hover，:active 等等） * 偽類元素（:before 和 :after） * 父級選擇器的聲明樣式（.selected，.active 等等） * 用 sass 的上下文媒體查詢 * 子選擇器作為最后的部分 #### 推薦 ```css .test { @extend %clearfix; color:#ccc; &:hover { color:#000; } &:before { border:1px solid #eee; content:""; } &.active { color:#f00; &:hover { color:#ff0; } } @media screen and (max-width: 640px) { display:block; font-size:2em; } > .title { font-size:1.2em; } } ``` <p class="over">Over!</p>