前端開發之Pascal命名規範 & BEM命名規範

Pascal命名規範

與前端開發廣泛採用的駝峯式命名發不一樣的是，Pascal(帕卡斯)命名法採用的首字母大寫，在類、方法（函數）和屬性命名的規範上採用駝峯式命名法，在方法上能夠選擇採用pascal命名法

• 具體用法
  方法命名通常用動詞，變量命名通常按功能或方法的返回值命名。如 int max= , GetMax()。

BEM命名規範

Bem 是塊（block）、元素（element）、修飾符（modifier）的簡寫利用不一樣的區塊，功能以及樣式來給元素命名。官網

• 解決問題
  • 光憑class名字就可讓其餘開發者知道某個標記用來作什麼的，明白各個模塊之間的關係
  • 組件之間的徹底解耦，不會形成命名空間的污染

1. 語法

• -中劃線 ：僅做爲連字符使用，表示某個塊或者某個子元素的多單詞之間的鏈接記號。

• __ 雙下劃線：雙下劃線用來鏈接塊和塊的子元素。
• _ 單下劃線：單下劃線用來描述一個塊或者塊的子元素的一種狀態。

2. 用法

• 命名模式爲：

.block {}
.block__element {}
.block_modifier {}
.type-block__element_modifier
複製代碼

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

block表明一個組，而element表明組裏面的成員，而modifier，雖然在上圖沒有畫出，可是能夠知道這個則是用於描述每個元素的具體的屬性。

3. 使用

• 何時應該用 BEM 格式
  用在具體組件裏，公共樣式裏使用則非必須

• CSS 預處理器配合使用

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

LESS/SASS書寫規範

使用 .less/.sass 後綴的文件來存儲變量、混合代碼以及最終合併壓縮。

子less	註解
lib-base.less	預約義的變量，例如顏色、字號、字體
lib-mixins.less	用於混合的代碼，例如漸變、半透明的混合
lib-reset.less	初始化
lib-ui.less	顆粒化ui功能
xxx.less	模塊樣式

.less/.sass 文件的引用順序會對最終編譯的樣式的做用域和優先級產生影響，請儘可能按照由底層到自定義的順序來引用。

其餘前端命名規範

騰訊前端命名規範
網易nec命名規範

參考連接

juejin.im/entry/58e60…?
juejin.im/post/5b925e…