資訊專欄INFORMATION COLUMN
摘要：前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂，盡量保持不重復(fù)沖突，盡量不要用。我覺得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來的名稱，會生成。
前端編碼規(guī)范之：Git使用規(guī)范
前端編碼規(guī)范之：樣式（scss）編碼規(guī)范
前端編碼規(guī)范之：HTML結(jié)構(gòu)規(guī)范
前端編碼規(guī)范之：Vue最佳實踐
前端編碼規(guī)范之：Javascript編碼規(guī)范
css/scss命名的原則是：通俗易懂，盡量保持不重復(fù)（沖突），盡量不要用id。
我比較推崇bootstrap的樣式目錄結(jié)構(gòu)，class命名方式。推薦bootstrap樣式框架的編碼規(guī)范，同時結(jié)合BEM命名規(guī)范，靈活使用。
class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達(dá)任何意思。
class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。
基于最近的父 class 或基本（base） class 作為新 class 的前綴。
使用 .js-* class 來標(biāo)識行為（與樣式相對），并且不要將這些 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的關(guān)鍵是，可以獲得更多的描述和更加清晰的結(jié)構(gòu)，從其名字可以知道某個標(biāo)記的含義。于是，通過查看 HTML 代碼中的 class 屬性，就能知道元素之間的關(guān)聯(lián)。
BEM命名規(guī)范
思考總的來說，BEM使用應(yīng)該適量，適用于模塊化的html結(jié)構(gòu)。不能全篇使用，會導(dǎo)致class命名冗余。
我覺得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式,用預(yù)處理器拼接出來的class名稱，會生成.article__body__xxx__xxx。在維護代碼的時候，定位代碼及其不方便。
規(guī)范也要進(jìn)化，適合的才是最好的。
~而且，一般來說會使用通過 LESS/SASS 等預(yù)處理器語言來編寫 CSS，利用其語言特性書寫起來要簡單很多。~
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114015.html
摘要：雜項用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個變量不要在同個 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護 一、 命名規(guī)范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個變量不要在同個 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護 一、 命名規(guī)范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個變量不要在同個 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護 一、 命名規(guī)范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
導(dǎo)語: 隨著業(yè)務(wù)的增長和開發(fā)團隊的成員快速增加，其中很多新人來自于五湖四海各大門派，在編碼的風(fēng)格和習(xí)慣中也出現(xiàn)各異。 通常在相互 codereview 時發(fā)現(xiàn)很多代碼上的問題，久而久之代碼出現(xiàn)了代碼難以維護的問題，甚至還會出現(xiàn)低級錯誤。 因此，我嘗試在前端代碼質(zhì)量的管控上做了些探索，也總結(jié)了一些經(jīng)驗分享給大家。 作者：鄭振波 本文大綱介紹 編碼規(guī)范 冗余文件與代碼 1. 編碼規(guī)范 在一些老項...
摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項目結(jié)構(gòu)和編碼方式，共同運行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項目共享代碼 (...
閱讀 1778·2023-04-25 23:43
閱讀 962·2021-11-24 09:39
閱讀 744·2021-11-22 15:25
閱讀 1744·2021-11-22 12:08
閱讀 1118·2021-11-18 10:07
閱讀 2104·2021-09-23 11:22
閱讀 3375·2021-09-22 15:23
閱讀 2608·2021-09-13 10:32
