前端編碼規範之：樣式（scss）編碼規範

時間 2019-11-06

原文原文鏈接

前端編碼規範之：Git使用規範
前端編碼規範之：樣式（scss）編碼規範
前端編碼規範之：HTML結構規範
前端編碼規範之：Vue最佳實踐
前端編碼規範之：Javascript編碼規範

css/scss命名的原則是：通俗易懂，儘可能保持不重複（衝突），儘可能不要用id。
我比較推崇bootstrap的樣式目錄結構，class命名方式。推薦bootstrap樣式框架的編碼規範，同時結合BEM命名規範，靈活使用。css

class 命名

class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峯命名法）。破折號應當用於相關 class 的命名（相似於命名空間）（例如，.btn 和 .btn-danger）。
避免過分任意的簡寫。.btn 表明 button，可是 .s 不能表達任何意思。
class 名稱應當儘量短，而且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。
基於最近的父 class 或基本（base） class 做爲新 class 的前綴。
使用 .js-* class 來標識行爲（與樣式相對），而且不要將這些 class 包含到 CSS 文件中。
在爲 Sass 和 Less 變量命名是也能夠參考上面列出的各項規範。

/* Bad example */
    .t { ... }
    .red { ... }
    .header { ... }
    
    /* Good example */
    .tweet { ... }
    .important { ... }
    .tweet-header { ... }

代碼組織

以組件爲單位組織代碼段。
制定一致的註釋規範。
使用一致的空白符將代碼分隔成塊，這樣利於掃描較大的文檔。
若是使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，由於頁面會被重組，而組件只會被移動。html

能夠把bootstrap-sass目錄結構 clone下來，研究一番。前端

什麼是BEM

命名約定的模式以下：git

.block{}
    .block__element{}
    .block--modifier{}

.block 表明了更高級別的抽象或組件。
.block__element 表明.block的後代，用於造成一個完整的.block的總體。
.block--modifier表明.block的不一樣狀態或不一樣版本。github

參考原文bootstrap

BEM命名規範

BEM的關鍵是，能夠得到更多的描述和更加清晰的結構，從其名字能夠知道某個標記的含義。因而，經過查看 HTML 代碼中的 class 屬性，就能知道元素之間的關聯。sass

BEM命名規範框架

思考

總的來講，BEM使用應該適量，適用於模塊化的html結構。不能全篇使用，會致使class命名冗餘。
我以爲應該避免出現出現這種方式,用預處理器拼接出來的class名稱，會生成.article__body__xxx__xxx。在維護代碼的時候，定位代碼及其不方便。
規範也要進化，適合的纔是最好的。模塊化

~~~並且，通常來講會使用經過 LESS/SASS 等預處理器語言來編寫 CSS，利用其語言特性書寫起來要簡單不少。~~~

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}