# 一. CSS ## 1.格式 * 使用 2 個空格作為縮進。 * 類名建議使用破折號代替駝峰法。如果你使用 BEM，也可以使用下劃線。 * 不要使用 ID 選擇器。 * 在一個規則聲明中應用了多個選擇器時，每個選擇器獨占一行。 * 在規則聲明的左大括號 {前加上一個空格。 * 在屬性的冒號:后面加上一個空格，前面不加空格。 * 規則聲明的右大括號 }獨占一行。 * 規則聲明之間用空行分隔開。 ~~~css //Bad .avatar{ border-radius:50%; border:2px solid white; } .no, .nope, .not_good { // ... } #lol-no { // ... } //Good .avatar { border-radius: 50%; border: 2px solid white; } .one, .selector, .per-line { // ... } ~~~ ## 2. 注釋 * 建議使用行注釋 (在 Sass 中是 //) 代替塊注釋。 * 建議注釋獨占一行。避免行末注釋。 * 給沒有自注釋的代碼寫上詳細說明，比如： * 為什么用到了 z-index * 兼容性處理或者針對特定瀏覽器的 hack ## 3. ID 選擇器 * 在 CSS 中，雖然可以通過 ID 選擇元素，但大家通常都會把這種方式列為反面教材。 * ID 選擇器給你的規則聲明帶來了不必要的高 優先級，而且 ID 選擇器是不可重用的。 ## 4. JavaScript 鉤子 * 避免在 CSS 和 JavaScript 中綁定相同的類。 * 否則開發者在重構時通常會出現以下情況：輕則浪費時間在對照查找每個要改變的類，重則因為害怕破壞功能而不敢作出更改。 * 我們推薦在創建用于特定 JavaScript 的類名時，添加 .js-前綴： ~~~html <button class="btn btn-primary js-request-to-book">Request to Book</button> ~~~ ## 5. 邊框 在定義無邊框樣式時，使用 0代替 none。 ~~~css //Bad .foo { border: none; } //Good .foo { border: 0; } ~~~ # 二.Sass ## 6.語法 使用 .scss的語法，不使用 .sass原本的語法。 ## 7. 屬性聲明 首先列出除去 @include和嵌套選擇器之外的所有屬性聲明。 ~~~css .btn-green { background: green; font-weight: bold; // ... } ~~~ ## 8. @include聲明 緊隨后面的是 @include，這樣可以使得整個選擇器的可讀性更高。 ~~~css .btn-green { background: green; font-weight: bold; @include transition(background 0.5s ease); // ... } ~~~ ## 9. 嵌套選擇器 如果有必要_用到嵌套選擇器，把它們放到最后，在規則聲明和嵌套選擇器之間要加上空白，相鄰嵌套選擇器之間也要加上空白。嵌套選擇器中的內容也要遵循上述指引。 ~~~css .btn { background: green; font-weight: bold; @include transition(background 0.5s ease); .icon { margin-right: 10px; } } ~~~ ## 10. 變量 變量名應使用破折號（例如 $my-variable）代替 camelCased 和 snake_cased 風格。 對于僅用在當前文件的變量，可以在變量名之前添加下劃線前綴（例如 $_my-variable）。 ## 11. Mixins 為了讓代碼遵循 DRY 原則（Don’t Repeat Yourself）、增強清晰性或抽象化復雜性，應該使用 mixin，這與那些命名良好的函數的作用是異曲同工的。 ## 12. 擴展指令 應避免使用 @extend指令，因為它并不直觀，而且具有潛在風險，特別是用在嵌套選擇器的時候。 即便是在頂層占位符選擇器使用擴展，如果選擇器的順序最終會改變，也可能會導致問題。（比如，如果它們存在于其他文件，而加載順序發生了變化）。 其實，使用 @extend 所獲得的大部分優化效果，gzip 壓縮已經幫助你做到了，因此你只需要通過 mixin 讓樣式表更符合 DRY 原則就足夠了。