一篇技術博文引發的stylelint專案實踐

孤舟蓑翁發表於2021-07-03

背景

看到專案中團隊成員寫CSS樣式風格迥異，CSS樣式的書寫順序沒有鮮明的規範。想到以前看過CSS樣式書寫順序的文章，決定找出來，給團隊成員科普一下。查閱了好幾篇文章，覺得這篇文章給出的理由最硬核，css樣式的書寫順序及原理——很重要！ 然而擔心萬一文中的觀點不對，分享出去被打臉，於是決定驗證一下文中的說法。發現文中的核心觀點，下面這一段：

 

 沒經受起實踐的檢驗。瀏覽器在渲染頁面的過程中，並不是實時逐條讀取樣式生成CSS Rule Tree，並進行繪製，而是會將同一個檔案中的同類樣式先合併，再去構建樣式規則樹並繪製。請看下面的實驗，假如瀏覽器是實時逐條讀取樣式規則並進行繪製，那麼box在渲染繪製的過程中，應該在某一瞬間出現綠色的背景，實際上發現並未出現，未繪製之前，後面設定的樣式就把前面設定的背景色重置了。

<style>
  .box {
    width:100vw;
    height: 100vh;
    background-color: green;
  }
</style>
<script>
  setTimeout(() => {
    document.querySelector('.item').style.backgroundColor='blue';
  }, 2000);
</script>
<style>
  .box {
    background-color: red;
  }
</style>
<div class="box"></div>

實踐證明,樣式的書寫順序對頁面繪製沒有影響，雖然這篇文章的作者提出的觀點值得商榷，但是卻為我開啟了學習stylelint的大門。我通過以文查文，找到了stylelint 。stylelint的價值在於能發現樣式書寫中的問題，並能給出一套合理的書寫規範。而這，正是我想找的。

1. stylelint帶來的好處

  • 如下圖真實專案所示，可以發現樣式書寫的問題，以及對樣式書寫方法進行優化。
  • 此外，能使所有人寫的樣式風格都一致，看別人寫的程式碼，就像看自己寫的程式碼一樣，立刻秒懂，易於程式碼維護。
  • 從心中沒有明確規則的書寫樣式，變成按照業內知名公司 (GitHub、Google、Airbnb)的樣式規範要求寫樣式。畢竟Google就是瀏覽器業內的知名公司,按照Google的樣式書寫規則去寫，不會被坑。

2. stylelint儲存時自動格式化的配置方法

2.1 在VSCode應用市場,下載stylelint擴充套件

2.2 在專案下的.vscode/setting.json中新增開啟儲存自動格式化的配置

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    },
    // ...
}

3. 如何批量修復專案樣式檔案?

3.1 安裝stylelint相關的npm依賴包

yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order

stylelint-config-standard

作用：配置 Stylelint 規則。
官方的程式碼風格 ：stylelint-config-standard。該風格是 Stylelint 的維護者汲取了 GitHub、Google、Airbnb 多家之長生成的。

stylelint-order

該外掛的作用是強制你按照某個順序編寫 css。例如先寫定位，再寫盒模型，再寫內容區樣式，最後寫 CSS3 相關屬性。這樣可以極大的保證我們程式碼的可讀性。

stylelint-config-recess-order

stylelint-order 外掛的第三方配置

3.2 根目錄新增.stylelintrc.js 檔案

module.exports = {
    extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
    rules: {
        'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'extend', 'content', 'include'] }],
        indentation: 2,
        'no-descending-specificity': null, // 禁止特異性較低的選擇器在特異性較高的選擇器之後重寫
        // ...
    },
};

3.3 在package.json中新增stylelint樣式修復命令

{
    "scripts": {
        "lintless": "stylelint src/**/*.less --fix",
        // ...
    },
}

3.4 在終端下執行yarn lintless命令, 就能對不符合配置樣式規範的程式碼進行修復,部分問題還需要進一步手動修復。

yarn lintless

 

相關文章