前端編碼規(guī)范之：樣式（scss）編碼規(guī)范

reclay 發(fā)布于2019-08-29 16:58 / 2367人閱讀

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

前端編碼規(guī)范之：Git使用規(guī)范

前端編碼規(guī)范之：HTML結(jié)構(gòu)規(guī)范

前端編碼規(guī)范之：Vue最佳實踐

前端編碼規(guī)范之：Javascript編碼規(guī)范

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

class 命名

class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。

class 名稱應當盡可能短，并且意義明確。

使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的前綴。

使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

在為 Sass 和 Less 變量命名是也可以參考上面列出的各項規(guī)范。

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

代碼組織

以組件為單位組織代碼段。
制定一致的注釋規(guī)范。
使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。
如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。

可以把bootstrap-sass目錄結(jié)構(gòu) clone下來，研究一番。

什么是BEM

命名約定的模式如下：

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

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

參考原文

BEM命名規(guī)范

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

BEM命名規(guī)范

思考

總的來說，BEM使用應該適量，適用于模塊化的html結(jié)構(gòu)。不能全篇使用，會導致class命名冗余。
我覺得應該避免出現(xiàn)出現(xiàn)這種方式,用預處理器拼接出來的class名稱，會生成.article__body__xxx__xxx。在維護代碼的時候，定位代碼及其不方便。
規(guī)范也要進化，適合的才是最好的。

~而且，一般來說會使用通過 LESS/SASS 等預處理器語言來編寫 CSS，利用其語言特性書寫起來要簡單很多。~

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

云服務器 GPU云服務器規(guī)范編碼編碼規(guī)范 php編碼規(guī)范 js安全編碼規(guī)范

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114015.html

web前端編碼規(guī)范整合

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

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

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

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

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

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

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

yy13818512006 2019-05-23 17:29 評論0 收藏0
構(gòu)建前端項目

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

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