團隊規範之樣式規範實踐

我所處的團隊最近正在不斷壯大中，在維護項目增多，人員增長以及每一個人的編程習慣不一樣的背景下，我開始思考團隊編碼規範統一的工做該如何開展。說起編碼規範這個詞，大部分的人都會聯想到EsLint，它是一個JavaScript語言的檢查工具。這證實對於JavaScript的編寫規範上你們仍是很是重視的，可是當說起樣式書寫規範時，你們卻少有概念。有些人說css並非正統的編程語言，不須要過於嚴謹的書寫過程。若是你有這樣的想法，但願看完這篇文章你能對css有所改觀。

示例

接下來的內容都將經過如下的實例代碼展開：

.header {
  text-align: center;
  margin-left: 8px;
  color: #fff;
  font-family: PingFangSC-Regular;
  width: 100px;
  margin-right: 8px;
  transform:translate(50%,50%)
}
.footer {
  color: #FFF;
  transform: translate(50%, 50%);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
複製代碼

疑問

當我看到示例中的樣式代碼時，首先它給我帶來了閱讀障礙，我沒法快速的理解這個header和footer是一個什麼樣的容器、設計了怎樣的佈局。其次個人心中出現了許多疑問（固然這個例子是爲了更好的描述而編寫的，現實中應該沒有這麼拙劣的代碼）：

• 關於顏色的16進制應該用大寫仍是小寫
• 能夠簡寫的屬性是否要強制使用簡寫形式
• 屬性冒號以後是否須要空格
• 屬性值結尾是否須要強制使用分號

這些疑問伴隨着樣式代碼的書寫量增長隨之增多，成爲了在團隊規範化編碼的行程中必需要解決的問題。幸運的是在業界中已經出現瞭解決這些問題的工具——stylelint。stylelint是一個css檢查工具，它能夠類比爲檢測Js的檢查工具Eslint，咱們能夠經過配置相應的規則對css的編碼規範、風格進行必定的約束，從而達到團隊總體的一致性也提升了代碼的可閱讀性。

實踐

stylelint的應用和Eslint的應用方式相差很少，安裝對應的檢查器，檢查器會讀取配置文件中的規則對項目中的樣式文件進行檢查，接下來是我在團隊項目中的實踐。

Installation

npm install stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order --save-dev
複製代碼

• stylelint：規則檢查工具
• stylelint-config-standard：關於規範、風格約束的規則集，其中已經作了許多規則的配置
• stylelint-order：對css屬性進行排序的插件工具
• stylelint-config-recess-order：社區提供的屬性排序的規則集

Configuration

上面所列出的工具包如何真正應用到項目中就須要在項目的根目錄下建立建一個.stylelintrc文件，這是stylelint這一工具所須要讀取的配置文件，該文件的內容能夠書寫json語法或yaml語法。具體的配置以下：

{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "plugins": ["stylelint-order"],
  "rules": {
    // ...
  }
}
複製代碼

上述配置中的rules字段能夠用來定製適合本身團隊的規則，遇到extends引入的工具包中相同的規則時，它將對其進行覆蓋。假如你不瞭解stylelint存在哪些規則，你能夠查閱它的官網，或是你只須要社區提供的經常使用規則，那你徹底能夠不使用rules字段。

Usage

經過上面的兩步，咱們已經爲咱們的項目配置好了css樣式所須要的規範化工具。最後一步就是如何在項目中使用它，較爲常規的兩種方式有兩種：

1. 使用編輯器插件
2. 與你使用的構建技術相結合

這兩種方式能夠任選其一，在咱們的團隊中，咱們選擇讓二者同時存在結合使用。咱們的團隊在一年前統一了成員所使用的編輯器，這也是爲了規範化所作的一項措施。選擇了功能完善的visual studio code，讓咱們很方便的找到了stylelint-plus這個插件。安裝了該插件而且保證前兩步沒有錯誤的狀況下，你只須要打開該插件的Auto Fix On Save功能，就能夠在你編寫代碼時經過保存修復不符合規範的樣式。

儘管編輯器已經給咱們帶來了許多便利，但咱們並不能想固然的要求全部人都使用這種方式，由於咱們很難約束人的行爲。因此咱們仍然在構建中加入了檢測，這樣當你在編寫代碼的過程當中，終端會給出相應的報錯提示。

結語

stylelint的應用爲我解決了全部的疑惑，我不須要再考慮代碼的書寫風格不統一和屬性書寫順序的問題。關於屬性的書寫順序咱們統一使用如下的排序進行書寫：

1. 定位相關屬性 position top z-index
2. 自身相關屬性 width padding margin border
3. 文字樣式 font color
4. 文本屬性 text-align word-spacing
5. css3新增屬性

以這樣的書寫順序進行樣式書寫是我在一篇瀏覽器性能優化中學習到的，這有效的防止瀏覽器的重繪與迴流。儘管這一優化我無從得知其優化效率，可是我仍然以爲當我看到如下清晰的代碼的時候，會讓我心情愉悅。

.header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-item: center;
  width: 100px;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
複製代碼

以上是我對樣式規範化的實踐，但願個人文章中也有對你的團隊有幫助的地方。