CSS 屬性的排序對瀏覽器的渲染效能影響很小,幾乎可以忽略不計。瀏覽器在解析 CSS 時會建立內部的數據結構,不會被屬性順序影響。
不過,保持一致的 CSS 屬性排序仍然有其他好處:
提高程式碼可讀性
方便團隊協作
減少合併衝突
目前的經濟大環境比較差，網際網路公司新專案逐漸變少，維護專案的任務逐漸增多，而維護別人寫的程式碼就可能就是常態性的任務，快速閱讀和理解別人寫的程式碼比自己寫程式碼對開發者要求會更高，而統一整潔的程式碼風格更有利於維護和排查程式碼問題。
1. 安裝依賴
npm install --save-dev stylelint stylelint-config-standard stylelint-order
stylelint是一個用於檢測CSS程式碼風格的工具，不僅能處理style標籤內的css，還可以處理template模板中的行內樣式stylelint-config-standard是一種預設的stylelint配置規則集stylelint-order是一個用於規定CSS屬性順序的外掛
2. 建立 Stylelint 配置檔案
在專案根目錄建立一個 Stylelint 配置檔案 .stylelintrc.js：
module.exports = {
extends: ['stylelint-config-standard'],
plugins: ['stylelint-order'],
rules: {
'order/properties-alphabetical-order': true, //按照字母順序排列
// 或者使用更復雜的自定義排序規則：
// 'order/properties-order': [
// 'position',
// 'top',
// 'right',
// 'bottom',
// 'left',
// 'display',
// 'align-items',
// 'justify-content',
// 'float',
// 'clear',
// 'overflow',
// 'overflow-x',
// 'overflow-y',
// 'margin',
// 'margin-top',
// 'margin-right',
// 'margin-bottom',
// 'margin-left',
// 'padding',
// 'padding-top',
// 'padding-right',
// 'padding-bottom',
// 'padding-left',
// 'width',
// 'min-width',
// 'max-width',
// 'height',
// 'min-height',
// 'max-height',
// 'font-size',
// 'font-family',
// 'font-weight',
// 'text-align',
// 'text-transform',
// 'text-decoration',
// 'line-height',
// 'letter-spacing',
// 'color',
// 'background',
// 'background-color',
// 'background-image',
// 'background-repeat',
// 'background-position',
// 'border',
// 'border-top',
// 'border-right',
// 'border-bottom',
// 'border-left',
// 'border-radius',
// 'opacity',
// 'filter',
// 'list-style',
// 'outline',
// 'visibility',
// 'z-index',
// 'box-shadow',
// 'text-shadow',
// 'resize',
// 'transition'
// ],
},
overrides: [
{
files: ['*.vue', '**/*.vue'],
customSyntax: 'postcss-html'
},
{
files: ['*.scss', '**/*.scss'],
customSyntax: 'postcss-scss'
}
]
};
如果你對自定義排序規則覺得太麻煩，沒關係，Stylelint 確實有內建的 CSS 屬性排序規則，但它並不是預設啟用的。你可以使用 stylelint-config-recess-order 外掛來實現這個功能。這個外掛提供了一個預定義的 CSS 屬性排序順序，基於 Twitter 的 RECESS 專案。 在使用的過程中，它不僅僅會對css屬性排序，他對vue中的方法也會按照一定規則進行排序。
以下是如何在你的專案中設定它：
首先，安裝 stylelint-config-recess-order 外掛：
npm install --save-dev stylelint-config-recess-order
然後，在你的 .stylelintrc.js 檔案中新增這個配置。如果你還沒有這個檔案，可以建立一個。以下是一個基本的配置示例：
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
plugins: ['stylelint-order'],
rules: {
'order/properties-alphabetical-order': true
// 或者使用更復雜的排序規則：
// 'order/properties-order': ['position', 'top', 'right', 'bottom', 'left', 'display', 'align-items', 'justify-content', 'float', 'clear', 'overflow', 'overflow-x', 'overflow-y', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'font-size', 'font-family', 'font-weight', 'text-align', 'text-transform', 'text-decoration', 'line-height', 'letter-spacing', 'color', 'background', 'background-color', 'background-image', 'background-repeat', 'background-position', 'border', 'border-top', 'border-right', 'border-bottom', 'border-left', 'border-radius', 'opacity', 'filter', 'list-style', 'outline', 'visibility', 'z-index', 'box-shadow', 'text-shadow', 'resize', 'transition']
},
overrides: [
{
files: ['*.vue', '**/*.vue'],
customSyntax: 'postcss-html'
},
{
files: ['*.scss', '**/*.scss'],
customSyntax: 'postcss-scss'
}
]
};
3. 在 package.json 中新增 script：
{
"scripts": {
"format:stylelint": "stylelint --fix src/**/*.{vue,css,scss}"
}
}
現在，你可以執行 npm run format:stylelint 來排序 CSS 屬性。
npm i postcss-html postcss-scss -D
4. 整合到 VS Code
如果你使用 VS Code，你可以安裝 Stylelint 擴充套件，並在 settings.json 中新增以下配置：
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit"
},
"stylelint.validate": ["css", "less", "scss", "vue"]
}
這樣，每次儲存檔案時都會自動排序 CSS 屬性。
如果提示一些錯誤資訊，並且不想修復這些無關緊要的錯誤資訊，我們可以在rules中配置為禁用
rules: {
'selector-pseudo-element-no-unknown': null
}
配置完畢後，需要重啟vscode才能生效，目前我這是這個情況
5. Git 鉤子
你可以使用 husky 和 lint-staged 在提交程式碼前自動執行 Stylelint：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{css,less,scss,vue}": ["stylelint --fix"]
}
}
