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

reclay 發布于2019-08-29 16:58 / 2275人閱讀

摘要：前端編碼規范之使用規范前端編碼規范之樣式編碼規范前端編碼規范之結構規范前端編碼規范之最佳實踐前端編碼規范之編碼規范命名的原則是通俗易懂，盡量保持不重復沖突，盡量不要用。我覺得應該避免出現出現這種方式用預處理器拼接出來的名稱，會生成。

前端編碼規范之：Git使用規范

前端編碼規范之：HTML結構規范

前端編碼規范之：Vue最佳實踐

前端編碼規范之：Javascript編碼規范

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

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 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。

可以把bootstrap-sass目錄結構 clone下來，研究一番。

什么是BEM

命名約定的模式如下：

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

.block 代表了更高級別的抽象或組件。
.block__element 代表.block的后代，用于形成一個完整的.block的整體。
.block--modifier代表.block的不同狀態或不同版本。

參考原文

BEM命名規范

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

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;}
    }
}

GPU云服務器云服務器規范編碼編碼規范 php編碼規范 js安全編碼規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114015.html

web前端編碼規范整合

摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護一、命名規范項目命名：全部采用小寫方式，以下劃線分隔，例：my_pro...

孫淑建 2019-08-01 17:44 評論0 收藏0
web前端編碼規范整合

摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護一、命名規范項目命名：全部采用小寫方式，以下劃線分隔，例：my_pro...

liaoyg8023 2019-08-21 16:55 評論0 收藏0
web前端編碼規范整合

摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護一、命名規范項目命名：全部采用小寫方式，以下劃線分隔，例：my_pro...

Yang_River 2019-08-30 15:53 評論0 收藏0
前端代碼質量管理（一）

導語: 隨著業務的增長和開發團隊的成員快速增加，其中很多新人來自于五湖四海各大門派，在編碼的風格和習慣中也出現各異。通常在相互 codereview 時發現很多代碼上的問題，久而久之代碼出現了代碼難以維護的問題，甚至還會出現低級錯誤。因此，我嘗試在前端代碼質量的管控上做了些探索，也總結了一些經驗分享給大家。作者：鄭振波本文大綱介紹編碼規范冗余文件與代碼 1. 編碼規范在一些老項...

yy13818512006 2019-05-23 17:29 評論0 收藏0
構建前端項目

摘要：解決思路服務器端渲染服務器端和前端公用同一個應用，然后通過構建工具及配置，確定哪些組件需要再服務器端渲染，那些組件需要再客戶端渲染。服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。分離為什么需要前后端分離、web服務器與static服務器分離: 前端與后端耦合 (需求) 自動化、工程化的構建前端的代碼 (基礎條件) 模塊化、組件化，項目共享代碼 (...

mindwind 2019-08-23 13:51 評論0 收藏0