你值得擁有的CSS編碼規範

相信大多數開發者都很了解js的編碼規範，但是對css的編碼要求都不高，如果你的css代碼經常處于很難閱讀的狀态，那麼你就很需要一套完善的class命名和css編碼規範了。

文法規則

• 每條聲明都應該獨占一行
• 每條聲明語句的 

  :

   後應該插入一個空格
• 聲明塊的右花括号應當單獨成行
• 所有聲明語句都應當以分号結尾
• 為了代碼的易讀性，在每個聲明塊的左花括号前添加一個空格
• 對于以逗号分隔的屬性值，每個逗号後面都應該插入一個空格
• 對于屬性值或顔色參數，省略小于 1 的小數前面的 0 （例如，

  .5

   代替 

  0.5

  ）
• 十六進制值應該全部小寫
• 盡量使用簡寫形式的十六進制值，例如，用 

  #fff

   代替 

  #ffffff

• 為選擇器中的屬性添加雙引号，例如，

  input[type="text"]

• 避免為 0 值指定機關，例如，用 

  margin: 0;

   代替 

  margin: 0px

.box,
.card,
.wrapper[type="textbox"] {
  border: 1px solid #ccc;
  padding: 0;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
           

聲明順序

1. Positioning：位置屬性（position、right、top、z-index、display、float等）
2. Box module：盒模型（width、height、padding、margin等）
3. Typographic：排版（font、line-height、text-algin、letter-spacing等）
4. Visual：視覺相關（background、border等）
5. Other：其他（animation、transition、opacity等）

排序原因：因為位置屬性可以決定元素在文檔流中是否存在，可以覆寫盒模型的相關配置，是以理所應當排在首位；盒模型決定了元素的大小和間距，是以排在第二位；其他屬性隻會影響元素内部或者隻是視覺類不影響全局，是以排在前兩位之後。

.example {
  /* Positioning */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;

  /* Box-model */
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 0;

  /* Typography */
  font: normal 14px 'Microsoft YaHei', Arial, sans-serif;
  line-height: 1.5;
  color: #000;
  letter-spacing: 0;
  text-align: center;

  /* Visual */
  background-color: #ddd;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);

  /* Other */
  animation: 1s scale linear infinite;
  transition: all 0.2s ease-in-out;
  opacity: 0.8;
}
           

BEM命名規範

對于class的命名，我們可以直接選用BEM命名規範。BEM是一種元件化的 CSS 命名方法和規範，由俄羅斯 Yandex 團隊所提出，使用BEM可以更好地将使用者頁面劃分為獨立的塊，有利于團隊開發。

Block（塊）

block是個功能獨立的頁面元件，支援重複和嵌套，每個塊名必須是唯一的，明确指出是哪個塊。

Element（元素）

元素是塊的組成部分，是依賴上下文的，用于描述它是什麼，但不是它的狀态。元素之間可以互相嵌套，但元素永遠是子產品的一部分，而不是另一個元素的一部分。

Modifier（修飾器）

修飾器可以跟塊或者元素一起使用，主要是對已定義的元素或塊進行深度的裝飾或小的區分，是以修飾器不能單獨使用，必須依賴于元素或塊，防止混淆和沖突。

具體規則如下：

• 塊名稱為其元素和修飾符定義了命名空間。
• 塊名稱與元素名稱之間用雙連字元

  --

  分隔。
• 塊名稱與修飾符或元素與修飾符之間用雙下劃線

  __

  分隔。
• 命名一般使用小寫字母。
• 單詞之間可以使用

  -

  分隔。

使用模式：

.block { }

.block__element { }

.block--modifier { }

.block__element--modifier { }

舉個執行個體：

<div class="page">
  <div class="content">
    <div class="search-form">
      <div class="search-form__title"></div>
      <div class="search-form__btn btn--green"></div>
      <div class="search-form__btn btn--red"></div>
    </div>
  </div>
</div>
           

常用 className-關鍵詞

• 頁面結構相關

頁面：page

容器：wrapper、container、

頭部：header

内容/主體：content、con、main、basic

頁腳：footer

側邊欄：sider、sidebar、leftsidebar、rightsidebar

導航：nav、mainnav、subnav、topnav

菜單：menu、mainmenu、submenu

位置：fixed、center、left、right

• 功能相關

标題：title

摘要：summary

标簽：label、tag

标志：logo

廣告：banner

登入：login、logout

搜尋：search

狀态：state、status

頁簽：tab

清單：list、form、table

項目：item、subitem

熱點：hot

新聞：news

連結：link

滾動：scroll

注釋/描述：tips、notes、desc、detail、info

進度：progress

圖示：icon

資訊：msg

版權：copyright

頭像：avatar

指南：guide

設定：setting

按鈕/操作：btn、opt

移出：delete、remove、cancel

分割：divider

覆寫/皮膚：cover、mask

重命名：rename

屬性：prop

使用者：user

日期：date

單選：radio

圖檔：photo、img

等級：level

• 狀态相關

激活：active

懸停：hover

禁止：disabled

可操作：optabled、editabled

選中：checked、selected

目前：current

完成：finished、success

錯誤：error、failed

高亮：highlight

播放：play、pause、stop