【YQN】CSS \ Less \ Sass 編碼規範-企業開發項目流程

1 引言1.1 說明

本文檔以 Airbnb CSS Style Guide 為基礎，編寫符合自己團隊的編碼規範；統一了命名和注釋兩大痛點，就統一了80%的風格，所以我們重點拓展這兩部分內容，主體部分請參考基礎。

1.2 基礎2 風格規範2.1 命名2.1.1 類選擇器

出於以下原因，我們鼓勵使用 OOCSS 和 BEM 的某種組合：

可以幫助我們理清 CSS 和 HTML 之間清晰且嚴謹的關係。

可以幫助我們創建出可重用、易裝配的組件。

可以減少嵌套，降低特定性。

可以幫助我們創建出可擴展的樣式表。

OOCSS(http://oocss.org/)，也就是 「Object Oriented CSS（面向對象的CSS）」，是一種寫 CSS 的方法，其思想就是鼓勵你把樣式表看作「對象」的集合：創建可重用性、可重複性的代碼段讓你可以在整個網站中多次使用。

參考資料：

Nicole Sullivan 的 OOCSS wikicss規範

Smashing Magazine 的 Introduction to OOCSS

BEM，也就是 「Block-Element-Modifier」，是一種用於 HTML 和 CSS 類名的命名約定。BEM 最初是由 Yandex 提出的，要知道他們擁有巨大的代碼庫和可伸縮性，BEM 就是為此而生的，並且可以作為一套遵循 OOCSS 的參考指導規範。

CSS Trick 的 BEM 101

Harry Roberts 的 introduction to BEM

命名方式1：

以下兩種方式都可以，項目內保持統一。

<article class="listing-card listing-card-active">
  <h1 class="listing-card-title">標題</h1>
  <div class="listing-card-content">
    <p>內容</p>
  </div>

</article>.listing-card{ }
.listing-card-active{ }
.listing-card-title{ }
.listing-card-content{ }
.listing-card-footer{ }

.listing-card 是一個塊（block），表示高層次的組件。

.listing-card-title 是一個元素（element），它屬於.listing-card 的一部分，因此塊是由元素組成的。

.listing-card-featured 是一個修飾符（modifier），表示這個塊與.listing-card有著不同的狀態或者變化。

2.1.2 ID 選擇器

在 CSS 中，雖然可以通過 ID 選擇元素，但大家通常都會把這種方式列為反面教材。ID 選擇器給你的規則聲明帶來了不必要的高優先級，而且 ID 選擇器是不可重用的。

想要了解關於這個主題的更多內容，參見 CSS Wizardry 的文章，文章中有關於如何處理優先級的內容。

2.1.3 JavaScript 鉤子

避免在 CSS 和 JavaScript 中綁定相同的類。否則開發者在重構時通常會出現以下情況：輕則浪費時間在對照查找每個要改變的類，重則因為害怕破壞功能而不敢作出更改。

我們推薦在創建用於特定 JavaScript 的類名時，添加

前綴：

<button class="btn btn-primary js-request-to-book">Request to Book</button>2.1.4 命名空間

項目名-文件路徑-文件名

2.1.5 常用命名

待完善

2.2 注釋2.2.1 文件注釋2.2.1 細節注釋

建議注釋獨佔一行，有多行注釋內容時，使用多個單行注釋。避免行末注釋。

2.3 格式

CSS, Scss, Less 格式配置應用標準配置。

3 語言規範

遵循主流風格指南。

4 代碼檢查

StyleLint 詳細規則請參考 https://stylelint.io/user-guide/rules/

5 參考資料

https://github.com/airbnb/css

https://github.com/ecomfe/spec/blob/master/css-style-guide.md

https://github.com/ecomfe/spec/blob/master/less-code-style.md

https://github.com/ElemeFE/style-guide/blob/master/css-modulize.md

https://github.com/airbnb/javascript/tree/master/css-in-javascript

https://github.com/Zhangjd/css-style-guide