diff --git a/.stylelintrc.js b/.stylelintrc.js
index 1d411d1b..581c313b 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,7 +1,12 @@
 module.exports = {
-  plugins: ['stylelint-prettier'],
-  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  plugins: ['stylelint-prettier', 'stylelint-order'],
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-prettier',
+    'stylelint-config-recess-order'
+  ],
   rules: {
-    'prettier/prettier': true
+    'prettier/prettier': true,
+    'order/properties-order': ['width', 'height', 'padding', 'margin']
   }
 }
diff --git a/package.json b/package.json
index e80db9cd..dd11969b 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,9 @@
     "spectron": "^12.0.0",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recess-order": "^2.3.0",
     "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0",
     "stylelint-prettier": "^1.1.2",
     "ts-loader": "^8.0.6",
     "typescript": "^4.0.3",
diff --git a/src/app/app.less b/src/app/app.less
index a00a0b70..7008915b 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -1,11 +1,11 @@
 html,
 body,
 #app {
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  width: 100%;
   overflow: hidden;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, sans-serif;
diff --git a/src/components/error-boundary/index.less b/src/components/error-boundary/index.less
index 1a7558d5..76d1962a 100644
--- a/src/components/error-boundary/index.less
+++ b/src/components/error-boundary/index.less
@@ -1,9 +1,9 @@
 @prefix: ~'error';
 
 .@{prefix}-boundary {
+  width: 940px;
   height: 520px;
   margin: 0 auto;
-  width: 940px;
   &-title {
     color: #ed570f;
   }
diff --git a/src/components/process-bar/block.less b/src/components/process-bar/block.less
index d680670f..01c353b4 100644
--- a/src/components/process-bar/block.less
+++ b/src/components/process-bar/block.less
@@ -1,12 +1,12 @@
 .buffer-block {
+  width: 100%;
+  height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  height: 100%;
-  width: 100%;
   > div {
-    position: absolute;
     height: 100%;
+    position: absolute;
     background-color: #d4d4d4;
     &:first-child {
       border-top-left-radius: 4px;
diff --git a/src/electron/pages/index.less b/src/electron/pages/index.less
index aff68733..204694d6 100644
--- a/src/electron/pages/index.less
+++ b/src/electron/pages/index.less
@@ -1,7 +1,7 @@
 html,
 body {
-  height: 100%;
   width: 100%;
+  height: 100%;
   overflow: hidden;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, sans-serif;
diff --git a/src/pages/footer/component/lyrice-flash/index.less b/src/pages/footer/component/lyrice-flash/index.less
index 717eb33a..c7a53f06 100644
--- a/src/pages/footer/component/lyrice-flash/index.less
+++ b/src/pages/footer/component/lyrice-flash/index.less
@@ -1,16 +1,16 @@
 .lyrice-flash {
-  height: 100%;
   width: 100%;
+  height: 100%;
   text-align: center;
   overflow: hidden;
   transform: matrix(1, 0, 0, 1, 0, 0);
-  user-select: none;
   -webkit-user-select: none;
+  user-select: none;
   -webkit-app-region: drag;
   > div {
+    width: 100%;
     position: absolute;
     left: 100%;
-    width: 100%;
   }
   div&-active {
     left: 0;
@@ -41,18 +41,18 @@
     }
   }
   &-contanier {
+    width: 784px;
+    height: 100px;
     display: flex;
     align-items: center;
     position: fixed;
     bottom: 120px;
-    height: 100px;
-    width: 784px;
     font-size: 56px;
   }
   &-electron {
-    left: 0;
-    top: 0;
     width: 100%;
     height: 100%;
+    left: 0;
+    top: 0;
   }
 }
diff --git a/src/pages/footer/view/index.less b/src/pages/footer/view/index.less
index 02481186..c655ba88 100644
--- a/src/pages/footer/view/index.less
+++ b/src/pages/footer/view/index.less
@@ -4,11 +4,11 @@
   position: relative;
   background-color: var(--background-lighter);
   &-left {
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
     width: var(--sidebar-width);
     height: 100%;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
   }
   &-right {
     display: flex;
diff --git a/src/pages/sidebar/view/index.less b/src/pages/sidebar/view/index.less
index 130779cd..cb8dd7de 100644
--- a/src/pages/sidebar/view/index.less
+++ b/src/pages/sidebar/view/index.less
@@ -5,12 +5,12 @@
   border-right: @base-border;
   &-nav {
     &-name {
+      height: 40px;
+      padding: 0 6px;
+      margin: 2px 0;
       display: flex;
       align-items: center;
       font-size: 16px;
-      margin: 2px 0;
-      padding: 0 6px;
-      height: 40px;
       color: var(--secondary-text);
       &:hover {
         background-color: #f3f3f3;
diff --git a/yarn.lock b/yarn.lock
index 53249752..55228a4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13289,6 +13289,14 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
+postcss-sorting@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/postcss-sorting/download/postcss-sorting-5.0.1.tgz?cache=0&sync_timestamp=1600302289143&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-sorting%2Fdownload%2Fpostcss-sorting-5.0.1.tgz#10d5d0059eea8334dacc820c0121864035bc3f11"
+  integrity sha1-ENXQBZ7qgzTazIIMASGGQDW8PxE=
+  dependencies:
+    lodash "^4.17.14"
+    postcss "^7.0.17"
+
 postcss-svgo@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npm.taobao.org/postcss-svgo/download/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
@@ -13323,7 +13331,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha1-RD9qIM7WSBor2k+oUypuVdeJoss=
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.35"
   resolved "https://registry.npm.taobao.org/postcss/download/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha1-0r4AuZj38hHYonaXQHny6SuXDiQ=
@@ -15631,6 +15639,13 @@ stylelint-config-prettier@^8.0.2:
   resolved "https://registry.npm.taobao.org/stylelint-config-prettier/download/stylelint-config-prettier-8.0.2.tgz#da9de33da4c56893cbe7e26df239a7374045e14e"
   integrity sha1-2p3jPaTFaJPL5+Jt8jmnN0BF4U4=
 
+stylelint-config-recess-order@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npm.taobao.org/stylelint-config-recess-order/download/stylelint-config-recess-order-2.3.0.tgz#ee33adc4faf3a09ed8e3a53f682e1682e1884ff8"
+  integrity sha1-7jOtxPrzoJ7Y46U/aC4WguGIT/g=
+  dependencies:
+    stylelint-order "4.1.x"
+
 stylelint-config-recommended@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/stylelint-config-recommended/download/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657"
@@ -15643,6 +15658,15 @@ stylelint-config-standard@^20.0.0:
   dependencies:
     stylelint-config-recommended "^3.0.0"
 
+stylelint-order@4.1.x, stylelint-order@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/stylelint-order/download/stylelint-order-4.1.0.tgz#692d05b7d0c235ac66fcf5ea1d9e5f08a76747f6"
+  integrity sha1-aS0Ft9DCNaxm/PXqHZ5fCKdnR/Y=
+  dependencies:
+    lodash "^4.17.15"
+    postcss "^7.0.31"
+    postcss-sorting "^5.0.1"
+
 stylelint-prettier@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/stylelint-prettier/download/stylelint-prettier-1.1.2.tgz#2b19abe40789c380bffee3d4267c413d981a86ea"