css_17 | CSS——CSS 拓展：② CSS 編碼規範

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_17
複製代碼

1. 列舉 CSS 編碼規範？
2. 編碼規範的做用是什麼？列舉 5 條以上編碼規範。
複製代碼

---

前言： 編碼是否規範，直接影響代碼的可讀性、可維護性、可交接性等。一份好的代碼，能夠作到：無論有多少人共同參與同一項目，均可以確保每一行代碼都像是同一我的編寫的。

---

1 CSS命名技巧

• 語義化標籤優先
• 基於功能命名、基於內容命名、基於表現命名
• 簡略、明瞭、無後患

（💡 看這個東西中文名字是什麼，而後試着翻譯成英文。）

1.1 常見命名 1

名稱	用途
.wrap 或 .wrapper	用於外側包裹
.container 或 .ct	包裹容器
.header	用於頭部
.body	頁面 body
.footer	頁面尾部
.aside 、.sidebar	用於側邊欄
.content	和 header footer 對應，用於主要內容
.navigation	導航元素
.pagination	分頁

1.2 常見命名 2

名稱	用途
.tabs > .tab	tab 切換
.breadcrumbs	導航列表、麪包屑
.dropdown	下拉菜單
.article	文章
.main	用於主體
.thumbnail	頭像，小圖像
.media	媒體資源
.panel	面板
.tooltip	鼠標放置上去的提示
.popup	鼠標點擊彈出的提示

1.3 常見命名 3

名稱	用途
.button 、.btn	按鈕
.ad	廣告
.subnav	二級導航
.menu	菜單
.tag	標籤
.message 或者 .notice	提示消息
.summary	摘要
.logo	logo
.search	搜索框
.login	登陸

1.4 常見命名 4

名稱	用途
.register	註冊
.username	用戶名
.password	密碼
.banner	廣告條
.copyright	版權
.modal 或者 .dialog	彈窗

2 CSS 書寫規範

• tab 用兩個空格表示；
• css 的 : 後加個空格， { 前加個空格；
• 每條聲明後都加上分號；
• 換行，而不是放到一行；
• 顏色用小寫，用縮寫，如： #fff；
• 小數不用寫前綴， 0.5s → .5s ；0 不用加單位；
• 儘可能縮寫， margin: 5px 10px 5px 10px; → margin: 5px 10px;。

3 CSS 聲明順序

相關的屬性聲明應當歸爲一組，並按照下面的順序排列：

• Positioning
• Box model
• Typography（印刷）
• Visual （視覺）

因爲定位（positioning）能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box model）相關的樣式，所以排在首位。盒模型排在第二位，由於它決定了組件的尺寸和位置。

其餘屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，所以排在後面。
💡例如：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;


  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;


  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}
複製代碼

---

後記： 本篇文章常看常新，規範化的編碼對本身、對他人都是百利而無一害的。

祝好，qdywxs ♥ you！