diff --git a/.github/workflows/deploy-site.yml b/.github/workflows/deploy-site.yml
index d3f13a000..f36eaec71 100644
--- a/.github/workflows/deploy-site.yml
+++ b/.github/workflows/deploy-site.yml
@@ -8,16 +8,11 @@ jobs:
     runs-on: ubuntu-latest
     environment: prod
     steps:
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.15.0
-
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - uses: borales/actions-yarn@v3.0.0
-        with:
-          cmd: install
+          node-version: 18.10.0
+      - run: yarn install
 
       - name: build
         run: |
diff --git a/.github/workflows/docker-build-doc-site.yml b/.github/workflows/docker-build-doc-site.yml
index ecea6e9cb..d5a29af8f 100644
--- a/.github/workflows/docker-build-doc-site.yml
+++ b/.github/workflows/docker-build-doc-site.yml
@@ -11,12 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     environment: prod
     steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.15.0
-
-      - name: checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
diff --git a/.prettierignore b/.prettierignore
index fe25af9be..9424ef9c8 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,7 +4,7 @@
 **/test.ts
 src/index.html
 
-.stylelintrc
+.stylelintrc.js
 .prettierrc
 
 _nginx/
diff --git a/.stylelintignore b/.stylelintignore
index 7d6eed452..e58583612 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -4,3 +4,6 @@ src/assets/**/*
 packages/theme/system/utils/_border.less
 packages/theme/system/utils/_color.less
 packages/theme/system/utils/_spacing.less
+
+dist/**/*
+ng-alain/**/*
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index 11a7241d0..000000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-rational-order"
-  ],
-  "customSyntax": "postcss-less",
-  "plugins": [
-    "stylelint-order",
-    "stylelint-declaration-block-no-ignored-properties"
-  ],
-  "rules": {
-    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
-    "function-no-unknown": [
-      true,
-      {
-        "ignoreFunctions": [
-          "fade",
-          "tint",
-          "darken",
-          "ceil",
-          "fadein",
-          "floor",
-          "unit",
-          "shade",
-          "lighten",
-          "percentage",
-          "-",
-          "~`colorPalette",
-          "snaplist",
-          "fade-out"
-        ]
-      }
-    ],
-    "no-descending-specificity": null,
-    "no-invalid-position-at-import-rule": null,
-    "declaration-empty-line-before": null,
-    "keyframes-name-pattern": null,
-    "custom-property-pattern": null,
-    "number-max-precision": 8,
-    "alpha-value-notation": "number",
-    "color-function-notation": "legacy",
-    "selector-class-pattern": null,
-    "selector-id-pattern": null,
-    "plugin/declaration-block-no-ignored-properties": true,
-    "selector-type-no-unknown": null,
-    "selector-pseudo-element-no-unknown": [
-      true,
-      {
-        "ignorePseudoElements": [
-          "ng-deep"
-        ]
-      }
-    ],
-    "no-invalid-double-slash-comments": null,
-    "import-notation": "string",
-    "media-feature-range-notation": "prefix",
-    "media-query-no-invalid": null
-  }
-}
diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 000000000..b1967c2fc
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,88 @@
+const { propertyGroups } = require('stylelint-config-clean-order');
+
+const propertiesOrder = propertyGroups.map(properties => ({
+  noEmptyLineBetween: true,
+  emptyLineBefore: 'never',
+  properties
+}));
+
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  customSyntax: 'postcss-less',
+  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
+  rules: {
+    'function-name-case': ['lower', { ignoreFunctions: ['/colorPalette/'] }],
+    'function-no-unknown': [
+      true,
+      {
+        ignoreFunctions: [
+          'fade',
+          'tint',
+          'darken',
+          'ceil',
+          'fadein',
+          'floor',
+          'unit',
+          'shade',
+          'lighten',
+          'percentage',
+          '-',
+          '~`colorPalette',
+          'snaplist',
+          'fade-out'
+        ]
+      }
+    ],
+    'no-descending-specificity': null,
+    'no-invalid-position-at-import-rule': null,
+    'declaration-empty-line-before': null,
+    'keyframes-name-pattern': null,
+    'custom-property-pattern': null,
+    'number-max-precision': 8,
+    'alpha-value-notation': 'number',
+    'color-function-notation': 'legacy',
+    'selector-class-pattern': null,
+    'selector-id-pattern': null,
+    'plugin/declaration-block-no-ignored-properties': true,
+    'selector-type-no-unknown': null,
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['ng-deep']
+      }
+    ],
+    'no-invalid-double-slash-comments': null,
+    'import-notation': 'string',
+    'media-feature-range-notation': 'prefix',
+    'media-query-no-invalid': null,
+    'order/order': [
+      [
+        'dollar-variables',
+        'at-variables',
+        "custom-properties",
+        { type: 'at-rule', name: 'custom-media' },
+        { type: 'at-rule', name: 'function' },
+        { type: 'at-rule', name: 'mixin' },
+        { type: 'at-rule', name: 'extend' },
+        { type: 'at-rule', name: 'include' },
+        'declarations',
+        'less-mixins',
+        {
+          type: 'rule',
+          selector: /^&::[\w-]+/,
+          hasBlock: true
+        },
+        'rules',
+        { type: 'at-rule', name: 'media', hasBlock: true }
+      ],
+      { severity: 'warning' }
+    ],
+    'order/properties-order': [
+      propertiesOrder,
+      {
+        severity: 'warning',
+        unspecified: 'bottomAlphabetical'
+      }
+    ]
+  }
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f56905d2d..31c41bf05 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -33,8 +33,7 @@
   },
   "files.associations": {
     "*.json": "jsonc",
-    ".prettierrc": "json",
-    ".stylelintrc": "json"
+    ".prettierrc": "json"
   },
   "angular.enable-strict-mode-prompt": false
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9112bda80..5ec1a6aa4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26)
+
+
+### Features
+
+* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e))
+
+
+### Performance Improvements
+
+* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc))
+
+
+
 ## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20)
 
 
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index db63ca5b9..7c5ccfae3 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -126,4 +126,4 @@ stages:
           - script: yarn install
             displayName: 'Install'
           - script: yarn run lint
-    dependsOn: env
+    dependsOn: env
\ No newline at end of file
diff --git a/docs/changelog.en-US.md b/docs/changelog.en-US.md
index 4d3c6173b..1e1502077 100644
--- a/docs/changelog.en-US.md
+++ b/docs/changelog.en-US.md
@@ -14,6 +14,14 @@ NG-ALAIN strictly follows [Semantic Versioning 2.0.0](http://semver.org/lang/zh-
 
 ---
 
+## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26)
+
+### Performance Improvements
+
+* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc))
+* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e))
+
+
 ## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20)
 
 ### Bug Fixes
diff --git a/docs/changelog.zh-CN.md b/docs/changelog.zh-CN.md
index db545b0f0..e8acd3753 100644
--- a/docs/changelog.zh-CN.md
+++ b/docs/changelog.zh-CN.md
@@ -14,6 +14,14 @@ NG-ALAIN 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/)
 
 ---
 
+## [16.4.2](https://github.com/ng-alain/delon/compare/16.4.1...16.4.2) (2023-10-26)
+
+### Performance Improvements
+
+* **theme:modal:** perf code ([#1671](https://github.com/ng-alain/delon/issues/1671)) ([341ff56](https://github.com/ng-alain/delon/commit/341ff56dc67d65d5a545f124a51938366c7722dc))
+* **abc:qr:** will be removed in 18.0.0 ([#1667](https://github.com/ng-alain/delon/issues/1667)) ([5a7bdd4](https://github.com/ng-alain/delon/commit/5a7bdd42226960c8140397b1a1a377fb87ca725e))
+
+
 ## [16.4.1](https://github.com/ng-alain/delon/compare/16.4.0...16.4.1) (2023-10-20)
 
 ### Bug Fixes
diff --git a/docs/server.en-US.md b/docs/server.en-US.md
index e0012cd64..ed3ebed94 100644
--- a/docs/server.en-US.md
+++ b/docs/server.en-US.md
@@ -96,8 +96,12 @@ Abort more detail please refer to [Proxying to a backend server](https://angular
 
 ## Common problem
 
-**Q:** The request may be rejected or returned directly to `401`?
+**The request may be rejected or returned directly to `401`?**
 
 Scaffolding uses the `SimpleInterceptor` interceptor of `@delon/auth` by default, which causes an error to be returned directly if a token cannot be obtained during the request.
 
 [User Authentication](/auth) This process is a must for the middle office.
+
+**Unable to display request log**
+
+Starting from Angular 13, the debugging log of remote requests will no longer be displayed in the terminal. If you need to display the log, you can fix from refer to [How to fix logging for proxy in angular](https://medium.com/@gagandeep.sidhu88/how-to-fix-logging-for-proxy-in-angular-834cf46d437d).
diff --git a/docs/server.zh-CN.md b/docs/server.zh-CN.md
index dd5a2f8e3..66ca1e5af 100644
--- a/docs/server.zh-CN.md
+++ b/docs/server.zh-CN.md
@@ -97,8 +97,12 @@ module.exports = {
 
 ## 常见问题
 
-**Q：** 请求可能被拒绝或直接返回 `401` ?
+**请求可能被拒绝或直接返回 `401` ?**
 
 脚手架默认情况下使用了 `@delon/auth` 的 `SimpleInterceptor` 拦截器，导致在请求过程中若发现无法获取 Token 时会直接返回错误。
 
 [用户认证](/auth)这个过程是中台必备的。
+
+**关于无法显示请求日志**
+
+从 Angular13 开始远程请求的调试日志将不再终端中显示，若有显示日期需求，可自行参考 [How to fix logging for proxy in angular](https://medium.com/@gagandeep.sidhu88/how-to-fix-logging-for-proxy-in-angular-834cf46d437d) 解决。
diff --git a/package.json b/package.json
index d878fd5d6..948b2e35f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "delon",
-  "version": "16.4.1",
+  "version": "16.4.2",
   "description": "Delon is a set of essential modules for NG-ALAIN.",
   "keywords": [
     "delon",
@@ -81,7 +81,7 @@
     "extend": "^3.0.2",
     "file-saver": "^2.0.5",
     "ng-github-button": "^16.0.0",
-    "ng-zorro-antd": "16.2.0",
+    "ng-zorro-antd": "^16.2.2",
     "ngx-color": "~9.0.0",
     "ngx-countdown": "^16.0.0",
     "ngx-highlight-js": "^16.1.0",
@@ -145,10 +145,9 @@
     "readline-sync": "^1.4.10",
     "stream": "0.0.2",
     "stylelint": "^15.10.3",
-    "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
-    "stylelint-order": "^6.0.3",
+    "stylelint-config-clean-order": "^5.2.0",
     "source-map-explorer": "^2.5.3",
     "xlsx": "^0.18.5",
     "jszip": "^3.10.1",
diff --git a/packages/abc/avatar-list/style/index.less b/packages/abc/avatar-list/style/index.less
index 181e7f777..7a93c5890 100644
--- a/packages/abc/avatar-list/style/index.less
+++ b/packages/abc/avatar-list/style/index.less
@@ -17,9 +17,10 @@
     height: @avatar-size-base;
     margin-left: -8px;
     font-size: @font-size-base;
+
     .@{ant-prefix}-avatar {
-      border: 1px solid #fff;
       cursor: pointer;
+      border: 1px solid #fff;
     }
   }
 
@@ -36,6 +37,7 @@
   &__mini {
     width: @avatar-list-mini-wh;
     height: @avatar-list-mini-wh;
+
     .@{ant-prefix}-avatar {
       width: @avatar-list-mini-wh;
       height: @avatar-list-mini-wh;
diff --git a/packages/abc/cell/style/index.less b/packages/abc/cell/style/index.less
index e807da80f..96f7c4aa0 100644
--- a/packages/abc/cell/style/index.less
+++ b/packages/abc/cell/style/index.less
@@ -47,8 +47,8 @@
 
   .unit {
     margin-left: 2px;
-    color: @cell-unit-color;
     font-size: @cell-unit-font-size;
+    color: @cell-unit-color;
   }
 
   &__disabled {
diff --git a/packages/abc/down-file/style/index.less b/packages/abc/down-file/style/index.less
index b7569275f..bd93ad92e 100644
--- a/packages/abc/down-file/style/index.less
+++ b/packages/abc/down-file/style/index.less
@@ -10,6 +10,7 @@
     .down-file-not-support-behavior-mixin(@value) when (@value = 'hidden') {
       display: none;
     }
+    /* stylelint-disable-next-line order/order */
     .down-file-not-support-behavior-mixin(@down-file-not-support-behavior);
   }
 }
diff --git a/packages/abc/ellipsis/style/index.less b/packages/abc/ellipsis/style/index.less
index 8349c0027..c0da5482d 100644
--- a/packages/abc/ellipsis/style/index.less
+++ b/packages/abc/ellipsis/style/index.less
@@ -6,9 +6,9 @@ ellipsis {
 }
 
 @{ellipsis-prefix} {
+  overflow: hidden;
   display: inline-block;
   width: 100%;
-  overflow: hidden;
   word-break: break-all;
 
   &__lines {
@@ -17,9 +17,9 @@ ellipsis {
 
   &__line-clamp {
     position: relative;
+    overflow: hidden;
     /* stylelint-disable-next-line value-no-vendor-prefix */
     display: -webkit-box;
-    overflow: hidden;
     text-overflow: ellipsis;
   }
 
diff --git a/packages/abc/error-collect/style/index.less b/packages/abc/error-collect/style/index.less
index 26429c78a..4d0733964 100644
--- a/packages/abc/error-collect/style/index.less
+++ b/packages/abc/error-collect/style/index.less
@@ -2,9 +2,9 @@
 @error-collect-prefix: ~'.error-collect';
 
 @{error-collect-prefix} {
+  cursor: pointer;
   padding-right: 24px;
   color: @error-collect-color;
-  cursor: pointer;
 
   &__count {
     padding-left: 8px;
diff --git a/packages/abc/error-collect/style/rtl.less b/packages/abc/error-collect/style/rtl.less
index 8b7ee5a9a..6bc533ffe 100644
--- a/packages/abc/error-collect/style/rtl.less
+++ b/packages/abc/error-collect/style/rtl.less
@@ -1,7 +1,8 @@
 @{error-collect-prefix}-rtl {
+  direction: rtl;
   padding-right: 0;
   padding-left: 24px;
-  direction: rtl;
+
   @{error-collect-prefix} {
     &__count {
       padding-right: 8px;
diff --git a/packages/abc/exception/style/index.less b/packages/abc/exception/style/index.less
index 137707e7a..e93535054 100644
--- a/packages/abc/exception/style/index.less
+++ b/packages/abc/exception/style/index.less
@@ -7,15 +7,15 @@
   height: 100%;
 
   &__img-block {
+    zoom: 1;
     flex: 0 0 62.5%;
     width: 62.5%;
     padding-right: 152px;
-    zoom: 1;
 
     &::before,
     &::after {
-      display: table;
       content: ' ';
+      display: table;
     }
 
     &::after {
@@ -41,17 +41,17 @@
 
     &-title {
       margin-bottom: 24px;
-      color: #434e59;
-      font-weight: 600;
       font-size: 72px;
+      font-weight: 600;
       line-height: 72px;
+      color: #434e59;
     }
 
     &-desc {
       margin-bottom: 16px;
-      color: @text-color-secondary;
       font-size: 20px;
       line-height: 28px;
+      color: @text-color-secondary;
     }
 
     &-actions {
@@ -85,8 +85,8 @@
 @media screen and (max-width: @screen-xs) {
   @{exception-prefix} {
     &__img-block {
-      margin-bottom: -24px;
       overflow: hidden;
+      margin-bottom: -24px;
     }
   }
 }
diff --git a/packages/abc/footer-toolbar/style/index.less b/packages/abc/footer-toolbar/style/index.less
index 635368239..021064b99 100644
--- a/packages/abc/footer-toolbar/style/index.less
+++ b/packages/abc/footer-toolbar/style/index.less
@@ -3,9 +3,9 @@
 
 @{footer-toolbar-prefix} {
   position: fixed;
+  z-index: @zindex;
   right: 0;
   bottom: 0;
-  z-index: @zindex;
   display: flex;
   width: 100%;
   height: @footer-toolbar-height;
diff --git a/packages/abc/full-content/style/index.less b/packages/abc/full-content/style/index.less
index d3608ea9a..358b7245d 100644
--- a/packages/abc/full-content/style/index.less
+++ b/packages/abc/full-content/style/index.less
@@ -2,9 +2,9 @@
 @full-content-prefix: ~'.full-content';
 
 @{full-content-prefix} {
+  overflow: auto;
   display: block;
   height: 100%;
-  overflow: auto;
 
   &__body {
     overflow: hidden;
diff --git a/packages/abc/global-footer/style/index.less b/packages/abc/global-footer/style/index.less
index 0c5bb1552..5b6b07706 100644
--- a/packages/abc/global-footer/style/index.less
+++ b/packages/abc/global-footer/style/index.less
@@ -26,8 +26,8 @@
   }
 
   &__copyright {
-    color: @text-color-secondary;
     font-size: @font-size-base;
+    color: @text-color-secondary;
   }
 }
 
diff --git a/packages/abc/loading/style/index.less b/packages/abc/loading/style/index.less
index 4d9ced71e..c41759623 100644
--- a/packages/abc/loading/style/index.less
+++ b/packages/abc/loading/style/index.less
@@ -4,14 +4,14 @@
 @{loading-prefix} {
   &-backdrop {
     z-index: @loading-zindex;
-    background-color: @loading-backdrop-bg;
     opacity: 1;
+    background-color: @loading-backdrop-bg;
   }
 
   &-default {
     position: fixed;
-    inset: 0;
     z-index: @loading-zindex + 1;
+    inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -19,8 +19,8 @@
 
     &__icon {
       margin-bottom: 8px;
-      color: @loading-icon-color;
       font-size: 24px;
+      color: @loading-icon-color;
     }
 
     &__text {
diff --git a/packages/abc/notice-icon/style/index.less b/packages/abc/notice-icon/style/index.less
index 23fb0ae24..09669758c 100644
--- a/packages/abc/notice-icon/style/index.less
+++ b/packages/abc/notice-icon/style/index.less
@@ -5,8 +5,8 @@
   width: 336px;
 
   &__btn {
-    display: inline-block;
     cursor: pointer;
+    display: inline-block;
     transition: all 0.3s;
   }
 
@@ -28,14 +28,14 @@
   }
 
   .@{ant-prefix}-list {
-    max-height: 400px;
     overflow: auto;
+    max-height: 400px;
 
     &-item {
+      cursor: pointer;
+      overflow: hidden;
       padding-right: 24px;
       padding-left: 24px;
-      overflow: hidden;
-      cursor: pointer;
       transition: all 0.3s;
 
       &:last-child {
@@ -74,13 +74,13 @@
   }
 
   &__clear {
+    cursor: pointer;
     height: 46px;
-    color: @text-color;
     line-height: 46px;
+    color: @text-color;
     text-align: center;
     border-top: 1px solid @border-color-split;
     border-radius: 0 0 @border-radius-base @border-radius-base;
-    cursor: pointer;
     transition: all 0.3s;
 
     &:hover {
@@ -112,8 +112,8 @@
       float: right;
       margin-top: -1.5px;
       margin-right: 0;
-      color: @text-color-secondary;
       font-weight: normal;
+      color: @text-color-secondary;
     }
   }
 }
diff --git a/packages/abc/onboarding/style/index.less b/packages/abc/onboarding/style/index.less
index 494721083..5f368e8e2 100644
--- a/packages/abc/onboarding/style/index.less
+++ b/packages/abc/onboarding/style/index.less
@@ -8,10 +8,10 @@
 
   &__mask {
     position: fixed;
-    inset: 0;
     z-index: @onboarding-zindex - 1;
-    background-color: @onboarding-mask-background-color;
+    inset: 0;
     opacity: @onboarding-mask-opacity;
+    background-color: @onboarding-mask-background-color;
   }
 
   &__item {
@@ -19,11 +19,11 @@
   }
 
   &__light {
+    pointer-events: none;
     position: absolute;
     z-index: @onboarding-zindex;
     background-color: @onboarding-light-background-color;
     animation: @onboarding-light-ant;
-    pointer-events: none;
 
     &-el {
       // position: relative;
diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less
index 1bfdc251c..cfab65057 100644
--- a/packages/abc/page-header/style/index.less
+++ b/packages/abc/page-header/style/index.less
@@ -45,15 +45,15 @@
   }
 
   &__title {
-    color: @heading-color;
-    font-weight: 500;
     font-size: 20px;
+    font-weight: 500;
+    color: @heading-color;
 
     small {
       padding-left: @layout-gutter;
-      color: @page-header-title-sub-color;
-      font-weight: normal;
       font-size: 14px;
+      font-weight: normal;
+      color: @page-header-title-sub-color;
     }
   }
 
diff --git a/packages/abc/pdf/style/index.less b/packages/abc/pdf/style/index.less
index b57a3ecea..9c5795599 100644
--- a/packages/abc/pdf/style/index.less
+++ b/packages/abc/pdf/style/index.less
@@ -4,9 +4,9 @@
 @{pdf-prefix} {
   &-container {
     position: absolute;
+    overflow-x: auto;
     width: 100%;
     height: 100%;
-    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 }
diff --git a/packages/abc/qr/index.en-US.md b/packages/abc/qr/index.en-US.md
index d5aa15153..59f223156 100644
--- a/packages/abc/qr/index.en-US.md
+++ b/packages/abc/qr/index.en-US.md
@@ -5,8 +5,11 @@ title: qr
 subtitle: QR
 cols: 1
 module: import { QRModule } from '@delon/abc/qr';
+deprecated: 18.0.0
 ---
 
+# Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead.
+
 Generate a QR code based on [qrious](https://github.com/neocotic/qrious).
 
 
diff --git a/packages/abc/qr/index.zh-CN.md b/packages/abc/qr/index.zh-CN.md
index bb7137076..25de5d8ce 100644
--- a/packages/abc/qr/index.zh-CN.md
+++ b/packages/abc/qr/index.zh-CN.md
@@ -5,8 +5,11 @@ title: qr
 subtitle: 二维码
 cols: 1
 module: import { QRModule } from '@delon/abc/qr';
+deprecated: 18.0.0
 ---
 
+# 将在 18.0.0 中移除，请使用 [nz-qrcode](https://ng.ant.design/components/qr-code) 替代
+
 基于 [qrious](https://github.com/neocotic/qrious) 生成二维码。
 
 默认二维码的操作并不是刚需的原因，因此采用一种延迟加载脚本的形式，可以通过[全局配置](/docs/global-config)配置来改变默认 CDN 路径，默认情况下使用 `https://cdn.jsdelivr.net/npm/qrious/dist/qrious.min.js`。或安装 `npm i --save qrious` 依赖包并在 `angular.json` 的 `scripts` 引用 `"node_modules/qrious/dist/qrious.min.js"`。
diff --git a/packages/abc/qr/qr.component.ts b/packages/abc/qr/qr.component.ts
index db8fe41e5..92b497140 100644
--- a/packages/abc/qr/qr.component.ts
+++ b/packages/abc/qr/qr.component.ts
@@ -21,6 +21,9 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { QR_DEFULAT_CONFIG } from './qr.config';
 import { QROptions } from './qr.types';
 
+/**
+ * @deprecated Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead.
+ */
 @Component({
   selector: 'qr',
   exportAs: 'qr',
diff --git a/packages/abc/qr/qr.module.ts b/packages/abc/qr/qr.module.ts
index e46278787..a9b35a762 100644
--- a/packages/abc/qr/qr.module.ts
+++ b/packages/abc/qr/qr.module.ts
@@ -5,6 +5,9 @@ import { QRComponent } from './qr.component';
 
 const COMPONENTS = [QRComponent];
 
+/**
+ * @deprecated Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead.
+ */
 @NgModule({
   imports: [CommonModule],
   declarations: COMPONENTS,
diff --git a/packages/abc/quick-menu/style/index.less b/packages/abc/quick-menu/style/index.less
index 05eb3355a..6c26a3402 100644
--- a/packages/abc/quick-menu/style/index.less
+++ b/packages/abc/quick-menu/style/index.less
@@ -3,9 +3,9 @@
 
 @{quick-menu-prefix} {
   position: fixed;
+  z-index: @zindex + 2;
   right: -@quick-menu-border-width;
   left: auto;
-  z-index: @zindex + 2;
   display: block;
   backface-visibility: hidden;
   transition: margin 0.3s cubic-bezier(1, 0, 0, 1);
@@ -23,6 +23,7 @@
   }
 
   &__ctrl {
+    cursor: pointer;
     position: absolute;
     top: -1px;
     left: -@quick-menu-ctrl-hw;
@@ -31,7 +32,6 @@
     text-align: center;
     border-right: 0;
     border-radius: 3px 0 0 3px;
-    cursor: pointer;
 
     &-icon {
       font-size: 20px;
diff --git a/packages/abc/result/style/index.less b/packages/abc/result/style/index.less
index a5ba57de8..6a5907beb 100644
--- a/packages/abc/result/style/index.less
+++ b/packages/abc/result/style/index.less
@@ -7,10 +7,6 @@
   margin: 0 auto;
   text-align: center;
 
-  @media screen and (max-width: @screen-xs) {
-    width: 100%;
-  }
-
   &__icon {
     margin-bottom: 24px;
     font-size: 72px;
@@ -27,17 +23,17 @@
 
   &__title {
     margin-bottom: 16px;
-    color: @heading-color;
-    font-weight: 500;
     font-size: 24px;
+    font-weight: 500;
     line-height: 32px;
+    color: @heading-color;
   }
 
   &__desc {
     margin-bottom: 24px;
-    color: @text-color-secondary;
     font-size: 14px;
     line-height: 22px;
+    color: @text-color-secondary;
   }
 
   &__extra {
@@ -62,6 +58,10 @@
   .@{ant-prefix}-steps .@{ant-prefix}-steps-title {
     background: @result-extra-bg;
   }
+
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
 }
 
 @import './rtl.less';
diff --git a/packages/abc/reuse-tab/style/index.less b/packages/abc/reuse-tab/style/index.less
index d8020f8ed..0aa157070 100644
--- a/packages/abc/reuse-tab/style/index.less
+++ b/packages/abc/reuse-tab/style/index.less
@@ -2,18 +2,18 @@
 @reuse-tab-prefix: ~'.reuse-tab';
 
 @{reuse-tab-prefix} {
+  user-select: none;
   display: block;
   background-color: @reuse-tab-bg;
   outline: none;
-  user-select: none;
   .@{ant-prefix}-tabs {
     &-nav .@{ant-prefix}-tabs-tab {
       @{reuse-tab-prefix}__op {
         position: absolute;
         display: none;
         margin: 0;
-        color: @text-color;
         font-size: 10px;
+        color: @text-color;
       }
 
       &:hover {
@@ -23,8 +23,8 @@
       }
       @{reuse-tab-prefix}__name {
         &-width {
-          display: inline-block;
           overflow: hidden;
+          display: inline-block;
           text-overflow: ellipsis;
         }
       }
@@ -71,8 +71,8 @@
   }
 
   &__disabled {
-    opacity: 0.8;
     pointer-events: none;
+    opacity: 0.8;
   }
 }
 
diff --git a/packages/abc/se/style/index.less b/packages/abc/se/style/index.less
index aeba64337..70d050789 100644
--- a/packages/abc/se/style/index.less
+++ b/packages/abc/se/style/index.less
@@ -3,14 +3,14 @@
 
 @{se-prefix} {
   &__title {
-    display: block;
     float: none;
     clear: both;
+    display: block;
     width: 100%;
-    color: @heading-color;
-    font-weight: 700;
     font-size: 14px;
+    font-weight: 700;
     line-height: @line-height-base;
+    color: @heading-color;
   }
 
   &__item {
@@ -23,8 +23,8 @@
 
     &-empty {
       &::before {
-        display: inline-block;
         content: '';
+        display: inline-block;
       }
     }
 
@@ -37,8 +37,8 @@
     display: table-cell;
     flex: 0 0 auto;
     width: initial;
-    white-space: nowrap;
     text-align: right;
+    white-space: nowrap;
 
     &-optional {
       margin-left: @se-optional-margin;
diff --git a/packages/abc/st/style/index.less b/packages/abc/st/style/index.less
index 5e05c316c..8a7e58041 100644
--- a/packages/abc/st/style/index.less
+++ b/packages/abc/st/style/index.less
@@ -6,16 +6,16 @@
 
   &__p-left {
     .@{ant-prefix}-table-pagination {
-      display: block;
       float: none;
+      display: block;
       text-align: left;
     }
   }
 
   &__p-center {
     .@{ant-prefix}-table-pagination {
-      display: block;
       float: none;
+      display: block;
       text-align: center;
     }
   }
@@ -30,8 +30,8 @@
 
     &-disabled {
       @{st-prefix}__btn-text {
-        color: @st-btn-disabled-color;
         pointer-events: none;
+        color: @st-btn-disabled-color;
       }
     }
   }
@@ -181,8 +181,8 @@
         .ant-table-content,
         .ant-table-body {
           > table {
-            word-wrap: break-word !important;
             table-layout: fixed !important;
+            word-wrap: break-word !important;
           }
         }
       }
diff --git a/packages/abc/sv/style/index.less b/packages/abc/sv/style/index.less
index 11ac39702..cd5ca933c 100644
--- a/packages/abc/sv/style/index.less
+++ b/packages/abc/sv/style/index.less
@@ -13,8 +13,8 @@
 
     // offset the padding-bottom of last row
     .@{ant-prefix}-row {
-      margin-bottom: -@sv-bottom;
       overflow: hidden;
+      margin-bottom: -@sv-bottom;
     }
   }
 
@@ -23,8 +23,8 @@
       display: flex;
 
       @{sv-prefix}__label {
-        flex: 0 0 auto;
         overflow: hidden;
+        flex: 0 0 auto;
         text-align: right;
         text-overflow: ellipsis;
       }
@@ -39,30 +39,30 @@
   }
 
   &__title {
-    display: block;
     float: none;
     clear: both;
+    display: block;
     width: 100%;
     margin-bottom: @sv-bottom;
-    color: @heading-color;
-    font-weight: 500;
     font-size: 14px;
+    font-weight: 500;
+    color: @heading-color;
   }
 
   &__label {
     display: table-cell;
     // margin-right: 8px;
     padding-bottom: @sv-bottom;
-    color: @sv-label-color;
     line-height: 22px;
+    color: @sv-label-color;
     white-space: nowrap;
 
     &:not(@{sv-prefix}__label-empty) {
       &::after {
+        content: ':';
         position: relative;
         top: -0.5px;
         margin: 0 8px 0 2px;
-        content: ':';
       }
     }
 
@@ -85,10 +85,10 @@
     display: table-cell;
     width: 100%;
     padding-bottom: @sv-bottom;
-    color: @sv-detail-color;
     line-height: 22px;
-    vertical-align: top;
+    color: @sv-detail-color;
     word-break: break-all;
+    vertical-align: top;
   }
 
   &__type {
@@ -148,9 +148,9 @@
 
     &-prefix,
     &-unit {
-      color: @sv-value-prefix-unit-color;
       font-size: @sv-value-prefix-unit-font-size;
       font-style: normal;
+      color: @sv-value-prefix-unit-color;
     }
 
     &-prefix {
@@ -172,11 +172,11 @@
       padding-left: @sv-value-mulit-padding + @sv-value-mulit-content-width;
 
       &::before {
+        content: @sv-value-mulit-content;
         position: absolute;
         left: 0;
         width: @sv-value-mulit-content-width;
         color: @sv-label-color;
-        content: @sv-value-mulit-content;
       }
     }
 
diff --git a/packages/abc/tag-select/style/index.less b/packages/abc/tag-select/style/index.less
index c09a7b7fd..1bb35a5ca 100644
--- a/packages/abc/tag-select/style/index.less
+++ b/packages/abc/tag-select/style/index.less
@@ -3,15 +3,15 @@
 @tag-select-height: @tag-line-height + 2px; // 2px is top & bottom border width
 
 @{tag-select-prefix} {
+  user-select: none;
   position: relative;
+  overflow: hidden;
   display: block;
   max-height: @tag-select-height + @tag-select-margin;
   margin-top: -@tag-select-margin;
   margin-left: -8px;
-  overflow: hidden;
   line-height: @line-height-base;
   transition: all 0.3s;
-  user-select: none;
 
   &__expanded {
     max-height: 200px;
diff --git a/packages/abc/tag-select/style/rtl.less b/packages/abc/tag-select/style/rtl.less
index 9c6c59003..f499bfd2a 100644
--- a/packages/abc/tag-select/style/rtl.less
+++ b/packages/abc/tag-select/style/rtl.less
@@ -1,12 +1,13 @@
 @{tag-select-prefix}-rtl {
+  direction: rtl;
   margin-right: -8px;
   margin-left: 0;
-  direction: rtl;
 
   &__has-expand {
     padding-right: 0 !important;
     padding-left: 50px !important;
   }
+
   @{tag-select-prefix} {
     .@{ant-prefix}-tag {
       margin-right: 0;
diff --git a/packages/chart/card/style/index.less b/packages/chart/card/style/index.less
index 5b78d7740..1234f2cda 100644
--- a/packages/chart/card/style/index.less
+++ b/packages/chart/card/style/index.less
@@ -6,8 +6,8 @@
 
   &__top {
     position: relative;
-    width: 100%;
     overflow: hidden;
+    width: 100%;
 
     &-margin {
       margin-bottom: 12px;
@@ -19,21 +19,21 @@
   }
 
   &__meta {
-    &-wrap {
-      float: left;
-    }
-
     height: 22px;
-    color: @text-color-secondary;
     font-size: @font-size-base;
     line-height: 22px;
+    color: @text-color-secondary;
+
+    &-wrap {
+      float: left;
+    }
 
     &-action {
+      cursor: pointer;
       position: absolute;
       top: 4px;
       right: 0;
       line-height: 1;
-      cursor: pointer;
     }
   }
 
@@ -49,16 +49,16 @@
   }
 
   &__total {
+    overflow: hidden;
     height: 38px;
     margin-top: 4px;
     margin-bottom: 0;
-    overflow: hidden;
-    color: @heading-color;
     font-size: 30px;
     line-height: 38px;
-    white-space: nowrap;
+    color: @heading-color;
     text-overflow: ellipsis;
     word-break: break-all;
+    white-space: nowrap;
   }
 
   &__desc {
diff --git a/packages/chart/number-info/style/index.less b/packages/chart/number-info/style/index.less
index b743a1704..16fd91ffa 100644
--- a/packages/chart/number-info/style/index.less
+++ b/packages/chart/number-info/style/index.less
@@ -6,55 +6,55 @@
 
   &__title {
     margin-bottom: 16px;
-    color: @text-color;
     font-size: @font-size-lg;
+    color: @text-color;
     transition: all 0.3s;
 
     &-sub {
-      height: 22px;
       overflow: hidden;
-      color: @text-color-secondary;
+      height: 22px;
       font-size: @font-size-base;
       line-height: 22px;
-      white-space: nowrap;
+      color: @text-color-secondary;
       text-overflow: ellipsis;
       word-break: break-all;
+      white-space: nowrap;
     }
   }
 
   &__value {
-    margin-top: 4px;
     overflow: hidden;
+    margin-top: 4px;
     font-size: 0;
-    white-space: nowrap;
     text-overflow: ellipsis;
     word-break: break-all;
+    white-space: nowrap;
 
     &-suffix {
       margin-left: 4px;
-      color: @text-color;
       font-size: 16px;
       font-style: normal;
+      color: @text-color;
     }
 
     &-text {
       display: inline-block;
       height: 32px;
-      color: @heading-color;
       font-size: 24px;
       line-height: 32px;
+      color: @heading-color;
     }
 
     &-sub {
       margin-left: 32px;
-      color: @text-color-secondary;
       font-size: @font-size-lg;
+      color: @text-color-secondary;
       vertical-align: top;
 
       .anticon {
+        transform: scale(0.82);
         margin-left: 4px;
         font-size: 12px;
-        transform: scale(0.82);
       }
 
       .anticon-caret-up {
@@ -79,6 +79,7 @@
     padding-left: 32px;
 
     &::after {
+      content: '';
       position: absolute;
       top: 0;
       bottom: 0;
@@ -86,7 +87,6 @@
       width: 1px;
       margin: 8px 0;
       background-color: @border-color-split;
-      content: '';
     }
   }
 }
diff --git a/packages/chart/pie/style/index.less b/packages/chart/pie/style/index.less
index fe6d93c7c..7d26205c4 100644
--- a/packages/chart/pie/style/index.less
+++ b/packages/chart/pie/style/index.less
@@ -13,17 +13,17 @@
     position: absolute;
     top: 50%;
     right: 0;
+    transform: translateY(-50%);
     min-width: 250px;
     margin: 0 20px;
     padding: 0;
     list-style: none;
-    transform: translateY(-50%);
 
     &-item {
+      cursor: pointer;
       height: 22px;
       margin-bottom: 16px;
       line-height: 22px;
-      cursor: pointer;
 
       &:last-child {
         margin-bottom: 0;
@@ -66,8 +66,8 @@
       }
       @{g2-pie-prefix}__legend {
         position: relative;
-        min-width: auto;
         transform: none;
+        min-width: auto;
       }
     }
   }
@@ -76,25 +76,25 @@
     position: absolute;
     top: 50%;
     left: 50%;
+    transform: translate(-50%, -50%);
     height: 62px;
     text-align: center;
-    transform: translate(-50%, -50%);
 
     &-title {
       height: 22px;
       margin-bottom: 8px;
-      color: @text-color-secondary;
-      font-weight: normal;
       font-size: 14px;
+      font-weight: normal;
       line-height: 22px;
+      color: @text-color-secondary;
     }
 
     &-stat {
       display: block;
       height: 32px;
-      color: @heading-color;
       font-size: 1.2em;
       line-height: 32px;
+      color: @heading-color;
       white-space: nowrap;
     }
   }
diff --git a/packages/chart/radar/style/index.less b/packages/chart/radar/style/index.less
index 9192933bf..49ec30edd 100644
--- a/packages/chart/radar/style/index.less
+++ b/packages/chart/radar/style/index.less
@@ -8,20 +8,20 @@
     margin-top: 16px;
 
     &-item {
+      cursor: pointer;
       position: relative;
-      color: @text-color-secondary;
       line-height: 22px;
+      color: @text-color-secondary;
       text-align: center;
-      cursor: pointer;
 
       &::after {
+        content: '';
         position: absolute;
         top: 8px;
         right: 0;
         width: 1px;
         height: 40px;
         background-color: @border-color-split;
-        content: '';
       }
 
       &:last-child::after {
@@ -33,9 +33,9 @@
       margin-top: 4px;
       margin-bottom: 0;
       padding-left: 16px;
-      color: @heading-color;
       font-size: 24px;
       line-height: 32px;
+      color: @heading-color;
     }
 
     &-dot {
diff --git a/packages/chart/trend/style/index.less b/packages/chart/trend/style/index.less
index a87534151..36a528cbf 100644
--- a/packages/chart/trend/style/index.less
+++ b/packages/chart/trend/style/index.less
@@ -13,8 +13,8 @@
     margin-left: 4px;
 
     i {
-      font-size: 12px;
       transform: scale(0.83);
+      font-size: 12px;
     }
   }
 
diff --git a/packages/chart/water-wave/style/index.less b/packages/chart/water-wave/style/index.less
index 93d796ff6..2e2a3e598 100644
--- a/packages/chart/water-wave/style/index.less
+++ b/packages/chart/water-wave/style/index.less
@@ -3,8 +3,8 @@
 
 @{g2-water-wave-prefix} {
   position: relative;
-  display: inline-block;
   transform-origin: left;
+  display: inline-block;
 
   &__desc {
     position: absolute;
@@ -14,20 +14,20 @@
     text-align: center;
 
     &-title {
-      color: @text-color-secondary;
       font-size: 14px;
       line-height: 22px;
+      color: @text-color-secondary;
     }
 
     &-percent {
-      color: @heading-color;
       font-size: 24px;
       line-height: 32px;
+      color: @heading-color;
     }
   }
 
   &__canvas {
-    transform: scale(0.5);
     transform-origin: 0 0;
+    transform: scale(0.5);
   }
 }
diff --git a/packages/form/src/style/index.less b/packages/form/src/style/index.less
index ec9caaa96..6b87bb51f 100644
--- a/packages/form/src/style/index.less
+++ b/packages/form/src/style/index.less
@@ -61,6 +61,7 @@
           padding-bottom: 0;
         }
         @{sf-prefix}__array-remove {
+          cursor: pointer;
           position: absolute;
           top: -16px;
           right: -16px;
@@ -72,7 +73,6 @@
           text-align: center;
           background: @sf-widget-array-type-card-remove-bg;
           border-radius: 50%;
-          cursor: pointer;
 
           i {
             color: #fff;
@@ -116,8 +116,8 @@
 
   // upload
   .@{ant-prefix}-upload-select-picture-card i {
-    color: #999;
     font-size: 32px;
+    color: #999;
   }
   .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
     height: 180px;
diff --git a/packages/theme/layout-default/style/_aside.less b/packages/theme/layout-default/style/_aside.less
index 2f850cef7..4fc695289 100644
--- a/packages/theme/layout-default/style/_aside.less
+++ b/packages/theme/layout-default/style/_aside.less
@@ -1,23 +1,23 @@
 @{alain-default-prefix}__aside {
   position: absolute;
+  z-index: @zindex + 5;
   top: 0;
   bottom: 0;
-  z-index: @zindex + 5;
+  overflow: hidden;
   width: @alain-default-aside-wd;
   margin-top: @alain-default-header-hg;
-  overflow: hidden;
-  background-color: @alain-default-aside-bg;
   backface-visibility: hidden;
+  background-color: @alain-default-aside-bg;
   transition: width 0.2s @alain-default-ease, translate 0.2s @alain-default-ease;
   -webkit-overflow-scrolling: touch;
 
   &::after {
+    content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     border-right: 1px solid @alain-default-content-heading-border;
-    content: '';
   }
 
   &-wrap {
@@ -27,13 +27,13 @@
   }
 
   &-inner {
-    flex: 1 1 0%;
+    // Firefox
+    scrollbar-width: none;
+    scroll-snap-type: proximity;
     overflow-x: hidden scroll;
+    flex: 1 1 0%;
     -webkit-overflow-scrolling: touch;
-    scroll-snap-type: proximity;
     scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%);
-    // Firefox
-    scrollbar-width: none;
     // Chrome
     &::-webkit-scrollbar {
       width: @alain-default-aside-scrollbar-height;
@@ -53,10 +53,10 @@
     border-top: 1px solid @alain-default-content-heading-border;
 
     &-collapsed {
+      cursor: pointer;
       padding: 8px 0;
       font-size: 16px;
       text-align: center;
-      cursor: pointer;
     }
   }
 }
diff --git a/packages/theme/layout-default/style/_header.less b/packages/theme/layout-default/style/_header.less
index cac7bf417..18abc135e 100644
--- a/packages/theme/layout-default/style/_header.less
+++ b/packages/theme/layout-default/style/_header.less
@@ -68,6 +68,7 @@
     }
 
     &-item {
+      cursor: pointer;
       display: block;
       min-width: 50px;
       padding: 8px 2px;
@@ -75,7 +76,6 @@
       text-align: center;
       border-radius: 2px;
       outline: none;
-      cursor: pointer;
       transition: background-color 300ms;
 
       &:hover {
@@ -85,9 +85,9 @@
 
       > i,
       &-icon {
-        font-size: @alain-default-header-icon-fs !important;
         // fix ant-dropdown-trigger
         transform: none !important;
+        font-size: @alain-default-header-icon-fs !important;
       }
     }
   }
@@ -105,8 +105,8 @@
     }
 
     &-disabled {
-      opacity: .5;
       pointer-events: none;
+      opacity: .5;
     }
   }
 }
@@ -166,8 +166,8 @@
       .@{ant-prefix}-input-group-addon,
       .@{ant-prefix}-input-affix-wrapper {
         i {
-          color: @grey-8;
           transform: rotate(90deg);
+          color: @grey-8;
         }
       }
     }
@@ -176,9 +176,9 @@
   @media (max-width: @mobile-max) {
     @{alain-default-prefix}__search {
       position: absolute;
+      z-index: @zindex+20;
       top: 0;
       left: 0;
-      z-index: @zindex+20;
       align-items: center;
       width: 100%;
       height: 100%;
diff --git a/packages/theme/layout-default/style/_layout.less b/packages/theme/layout-default/style/_layout.less
index f3e7de691..28084ea71 100644
--- a/packages/theme/layout-default/style/_layout.less
+++ b/packages/theme/layout-default/style/_layout.less
@@ -1,7 +1,7 @@
 html {
-  height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
-  direction: ltr;
   touch-action: manipulation;
+  direction: ltr;
+  height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
 }
 
 html,
@@ -18,11 +18,11 @@ body {
 
 @{alain-default-prefix} {
   position: relative;
+  overflow-x: hidden;
   display: block;
   width: 100%;
   height: auto;
   min-height: 100%;
-  overflow-x: hidden;
 
   &__unwrap {
     margin-right: -@alain-default-content-padding;
@@ -36,6 +36,7 @@ body {
 
   &__content {
     margin: 0 @alain-default-content-padding @alain-default-content-padding @alain-default-content-padding;
+    .router-ant();
 
     &-title {
       display: flex;
@@ -53,13 +54,13 @@ body {
 
       > h1 {
         margin-bottom: 0;
-        font-weight: normal;
         font-size: 18px;
+        font-weight: normal;
 
         > small {
           display: block;
-          color: @muted-color;
           font-size: 12px;
+          color: @muted-color;
         }
       }
     }
@@ -67,13 +68,12 @@ body {
     nz-input-group {
       width: auto;
     }
-    .router-ant();
   }
 
   &__hide-aside {
     @{alain-default-prefix}__content {
-      margin-left: @alain-default-content-padding !important;
       transform: none !important;
+      margin-left: @alain-default-content-padding !important;
     }
   }
 
diff --git a/packages/theme/layout-default/style/_progress-bar.less b/packages/theme/layout-default/style/_progress-bar.less
index 9dbf11a4d..e40c8dab3 100644
--- a/packages/theme/layout-default/style/_progress-bar.less
+++ b/packages/theme/layout-default/style/_progress-bar.less
@@ -1,18 +1,18 @@
 @{alain-default-prefix}__progress-bar {
   position: fixed;
   z-index: @zindex-base + 20;
+  overflow: hidden;
   width: 100vw;
   height: 4px;
-  overflow: hidden;
   background: fade(#ddd, 40%);
 
   &::after {
+    content: ' ';
+    transform-origin: top left;
     display: block;
     width: 33.3vw;
     height: 100%;
-    transform-origin: top left;
     animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
-    content: ' ';
   }
 }
 
diff --git a/packages/theme/layout-default/style/fix/_reuse-tab.less b/packages/theme/layout-default/style/fix/_reuse-tab.less
index fc7f37fc4..ec2ded905 100644
--- a/packages/theme/layout-default/style/fix/_reuse-tab.less
+++ b/packages/theme/layout-default/style/fix/_reuse-tab.less
@@ -8,10 +8,10 @@
 @{alain-default-prefix}__fixed {
   @{reuse-tab-prefix} {
     position: fixed;
+    z-index: @zindex-fixed + 1;
     top: @alain-default-header-hg;
     right: @alain-default-content-padding;
     left: @alain-default-aside-width;
-    z-index: @zindex-fixed + 1;
   }
 }
 
diff --git a/packages/theme/layout-default/style/fix/_sidebar-nav.less b/packages/theme/layout-default/style/fix/_sidebar-nav.less
index ced9a6cc0..50135d6a0 100644
--- a/packages/theme/layout-default/style/fix/_sidebar-nav.less
+++ b/packages/theme/layout-default/style/fix/_sidebar-nav.less
@@ -15,16 +15,16 @@
     transition: border-left-color 0.4s ease;
 
     &-link {
+      user-select: none;
       position: relative;
+      overflow: hidden;
       display: block;
       padding: @alain-default-aside-nav-padding-top-bottom @alain-default-aside-nav-padding-left-right * 2
         @alain-default-aside-nav-padding-top-bottom @alain-default-aside-nav-padding-left-right;
-      overflow: hidden;
       color: @alain-default-aside-nav-text-color;
-      white-space: nowrap;
       text-decoration: none !important;
       text-overflow: ellipsis;
-      user-select: none;
+      white-space: nowrap;
 
       &:hover {
         color: @alain-default-aside-nav-text-hover-color;
@@ -97,8 +97,8 @@
   }
 
   &__sub {
-    display: none;
     overflow: hidden;
+    display: none;
 
     @{sidebar-nav-prefix}__item {
       border-left: 0 !important;
@@ -113,6 +113,7 @@
 
       &::before,
       &::after {
+        content: '';
         position: absolute;
         width: 6px;
         height: 1.5px;
@@ -120,7 +121,6 @@
         background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
         border-radius: 2px;
         transition: background-color 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out;
-        content: '';
       }
 
       &::before {
diff --git a/packages/theme/layout-default/style/widgets/_app-icons.less b/packages/theme/layout-default/style/widgets/_app-icons.less
index 315690d2c..51d53fb34 100644
--- a/packages/theme/layout-default/style/widgets/_app-icons.less
+++ b/packages/theme/layout-default/style/widgets/_app-icons.less
@@ -2,10 +2,10 @@
   .app-icons {
     padding: @layout-gutter * 2;
     .@{ant-prefix}-col-6 {
+      cursor: pointer;
       padding: (@layout-gutter * 2) 0;
       text-align: center;
       border-radius: 4px;
-      cursor: pointer;
       transition: background-color 300ms;
 
       &:hover {
@@ -22,8 +22,8 @@
     small {
       display: block;
       padding-top: 4px;
-      color: #9c9c9c;
       font-size: 14px;
+      color: #9c9c9c;
     }
   }
 }
diff --git a/packages/theme/layout-default/style/widgets/_user.less b/packages/theme/layout-default/style/widgets/_user.less
index f11f8117c..91be390c4 100644
--- a/packages/theme/layout-default/style/widgets/_user.less
+++ b/packages/theme/layout-default/style/widgets/_user.less
@@ -3,22 +3,23 @@
 
 .alain-default-aside-user-mixin(@enabled) when(@enabled=true) {
   @{alain-default-prefix}__aside-user {
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: @alain-default-user-block-margin @alain-default-user-block-margin 0 @alain-default-user-block-margin;
-    cursor: pointer;
+
     .@{ant-prefix}-dropdown-trigger {
       display: flex;
       align-items: center;
     }
 
     &-info {
-      flex: 1;
       overflow: hidden;
+      flex: 1;
       color: @text-color;
-      white-space: nowrap;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &-avatar {
@@ -26,24 +27,6 @@
     }
   }
 
-  // Desktop
-  @media (min-width: @mobile-min) {
-    @{alain-default-prefix}__collapsed {
-      @{alain-default-prefix}__aside-user {
-        width: @alain-default-aside-collapsed-wd;
-        margin-left: 0;
-
-        &-info {
-          display: none;
-        }
-
-        &-avatar {
-          margin: 0 auto;
-        }
-      }
-    }
-  }
-
   [dir='rtl'] {
     @{alain-default-prefix}__aside-user {
       &-avatar {
@@ -64,5 +47,23 @@
       }
     }
   }
+
+  // Desktop
+  @media (min-width: @mobile-min) {
+    @{alain-default-prefix}__collapsed {
+      @{alain-default-prefix}__aside-user {
+        width: @alain-default-aside-collapsed-wd;
+        margin-left: 0;
+
+        &-info {
+          display: none;
+        }
+
+        &-avatar {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
 }
 .alain-default-aside-user-mixin(@alain-default-aside-user-enabled);
diff --git a/packages/theme/setting-drawer/style/index.less b/packages/theme/setting-drawer/style/index.less
index 5af000ebd..eace4b44c 100644
--- a/packages/theme/setting-drawer/style/index.less
+++ b/packages/theme/setting-drawer/style/index.less
@@ -28,33 +28,35 @@
 
     &__title {
       margin-bottom: 12px;
-      color: @heading-color;
       font-size: 14px;
       line-height: 22px;
+      color: @heading-color;
     }
 
     &__theme {
-      margin-top: 24px;
       overflow: hidden;
+      margin-top: 24px;
 
       &-tag {
+        cursor: pointer;
         float: left;
         width: 20px;
         height: 20px;
         margin-right: 8px;
-        color: #fff;
         font-weight: bold;
+        color: #fff;
         text-align: center;
         border-radius: 2px;
-        cursor: pointer;
       }
     }
 
     &__handle {
+      pointer-events: auto;
+      cursor: pointer;
       position: fixed;
+      z-index: @zindex-modal-mask - 1;
       top: 240px;
       right: 0;
-      z-index: @zindex-modal-mask - 1;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -64,18 +66,16 @@
       text-align: center;
       background: @primary-color;
       border-radius: 4px 0 0 4px;
-      cursor: pointer;
       transition: right @animation-duration-slow @ease-base-in;
-      pointer-events: auto;
 
       &-icon {
-        color: #fff;
         font-size: 20px;
+        color: #fff;
       }
 
       &-opened {
-        right: @setting-drawer-width;
         z-index: @zindex-modal-mask + 1;
+        right: @setting-drawer-width;
       }
     }
   }
diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts
index ce155caa1..8ea063c08 100644
--- a/packages/theme/src/services/modal/modal.helper.ts
+++ b/packages/theme/src/services/modal/modal.helper.ts
@@ -7,6 +7,8 @@ import { deepMerge } from '@delon/util/other';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { ModalOptions, NzModalService } from 'ng-zorro-antd/modal';
 
+const CLS_DRAG = 'MODAL-DRAG';
+
 export interface ModalHelperOptions {
   /** 大小；例如：lg、600、80%，默认：`lg` */
   size?: 'sm' | 'md' | 'lg' | 'xl' | '' | number | string;
@@ -39,7 +41,6 @@ export interface ModalHelperDragOptions {
 @Injectable({ providedIn: 'root' })
 export class ModalHelper {
   private document: Document;
-  private dragClsPrefix = 'MODAL-DRAG';
 
   constructor(
     private srv: NzModalService,
@@ -54,7 +55,7 @@ export class ModalHelper {
     const modalEl = wrapEl.firstChild as HTMLDivElement;
     const handelEl = options.handleCls ? wrapEl.querySelector<HTMLDivElement>(options.handleCls) : null;
     if (handelEl) {
-      handelEl.classList.add(`${this.dragClsPrefix}-HANDLE`);
+      handelEl.classList.add(`${CLS_DRAG}-HANDLE`);
     }
 
     return this.drag
@@ -95,36 +96,36 @@ export class ModalHelper {
     );
     return new Observable((observer: Observer<NzSafeAny>) => {
       const { size, includeTabs, modalOptions, drag, useNzData } = options as ModalHelperOptions;
-      let cls = '';
+      let cls: string[] = [];
       let width = '';
       if (size) {
         if (typeof size === 'number') {
           width = `${size}px`;
         } else if (['sm', 'md', 'lg', 'xl'].includes(size)) {
-          cls = `modal-${size}`;
+          cls.push(`modal-${size}`);
         } else {
           width = size;
         }
       }
       if (includeTabs) {
-        cls += ' modal-include-tabs';
+        cls.push(`modal-include-tabs`);
       }
       if (modalOptions && modalOptions.nzWrapClassName) {
-        cls += ` ${modalOptions.nzWrapClassName}`;
+        cls.push(modalOptions.nzWrapClassName);
         delete modalOptions.nzWrapClassName;
       }
       let dragOptions: ModalHelperDragOptions | null;
-      let dragWrapCls = `${this.dragClsPrefix}-${+new Date()}`;
+      let dragWrapCls = `${CLS_DRAG}-${+new Date()}`;
       let dragRef: DragRef | null;
       if (drag != null && drag !== false) {
         dragOptions = {
           handleCls: `.modal-header, .ant-modal-title`,
           ...(typeof drag === 'object' ? drag : {})
         };
-        cls += ` ${this.dragClsPrefix} ${dragWrapCls}`;
+        cls.push(CLS_DRAG, dragWrapCls);
       }
       const subject = this.srv.create({
-        nzWrapClassName: cls,
+        nzWrapClassName: cls.join(' '),
         nzContent: comp,
         nzWidth: width ? width : undefined,
         nzFooter: null,
diff --git a/packages/theme/system/_preloader.less b/packages/theme/system/_preloader.less
index a3188ce0b..a9ebbcb56 100644
--- a/packages/theme/system/_preloader.less
+++ b/packages/theme/system/_preloader.less
@@ -1,15 +1,14 @@
 /**
  * 未被直接引用，为了尽可快渲染预加载状态，生成的CSS代码已直接在 `index.html` 中引用
  */
-
 .preloader {
   position: fixed;
+  z-index: 9999;
   top: 0;
   left: 0;
-  z-index: 9999;
+  overflow: hidden;
   width: 100%;
   height: 100%;
-  overflow: hidden;
   background: #49a9ee;
   transition: opacity 0.65s;
 }
@@ -38,10 +37,10 @@
 .cs-loader-inner {
   position: absolute;
   top: 50%;
+  transform: translateY(-50%);
   width: 100%;
   color: #fff;
   text-align: center;
-  transform: translateY(-50%);
 
   label {
     display: inline-block;
diff --git a/packages/theme/system/antd/_modal.less b/packages/theme/system/antd/_modal.less
index 65037b972..158bd9fa7 100644
--- a/packages/theme/system/antd/_modal.less
+++ b/packages/theme/system/antd/_modal.less
@@ -68,16 +68,16 @@
       * ```
       */
     margin: 0;
-    color: @modal-heading-color;
-    font-weight: 500;
     font-size: @font-size-lg;
+    font-weight: 500;
     line-height: 22px;
+    color: @modal-heading-color;
     word-wrap: break-word;
 
     small {
       margin-left: @layout-gutter;
-      color: @muted-color;
       font-size: 12px;
+      color: @muted-color;
     }
   }
 
@@ -124,6 +124,8 @@
   }
 }
 
-.MODAL-DRAG-HANDLE {
-  cursor: move;
+.MODAL-DRAG {
+  &-HANDLE {
+    cursor: move;
+  }
 }
diff --git a/packages/theme/system/antd/_table.less b/packages/theme/system/antd/_table.less
index 674f60ac3..63babe10d 100644
--- a/packages/theme/system/antd/_table.less
+++ b/packages/theme/system/antd/_table.less
@@ -98,8 +98,8 @@
             align-items: center;
             width: 100%;
             padding: @nz-table-rep-padding-vertical @nz-table-rep-padding-horizontal;
-            white-space: inherit;
             text-align: left !important;
+            white-space: inherit;
             border-bottom: none;
 
             .@{ant-prefix}-table-rep__title + *:not(.@{ant-prefix}-avatar) {
diff --git a/packages/theme/system/ng/_preserve-white-spaces.less b/packages/theme/system/ng/_preserve-white-spaces.less
index c38534460..e50433de1 100644
--- a/packages/theme/system/ng/_preserve-white-spaces.less
+++ b/packages/theme/system/ng/_preserve-white-spaces.less
@@ -47,6 +47,7 @@
       }
     }
   }
+  /* stylelint-disable-next-line order/order */
   .preserve-white-spaces-rtl-mixin(@rtl-enabled);
 }
 
diff --git a/packages/theme/system/utils/_other.less b/packages/theme/system/utils/_other.less
index c4f048077..a03657159 100644
--- a/packages/theme/system/utils/_other.less
+++ b/packages/theme/system/utils/_other.less
@@ -14,9 +14,9 @@
      *
      * 元素不能被用户缩放
      */
+    resize: none;
     min-width: 100%;
     max-width: 100%;
-    resize: none;
   }
 
   &-data {
@@ -25,9 +25,9 @@
      *
      * 无数据元素
      */
-    color: rgba(0, 0, 0, 0.25);
     font-size: 16px;
     line-height: 64px;
+    color: rgba(0, 0, 0, 0.25);
     text-align: center;
 
     i {
@@ -65,8 +65,8 @@
   */
 .page-loading {
   position: absolute;
-  inset: 0;
   z-index: 10000;
+  inset: 0;
   padding-top: 200px;
   text-align: center;
   background: @background-color-base;
@@ -83,6 +83,6 @@
   * 禁用样式，不可响应任何事件
   */
 .disabled {
-  color: @disabled-color;
   pointer-events: none;
+  color: @disabled-color;
 }
diff --git a/packages/theme/system/utils/_position.less b/packages/theme/system/utils/_position.less
index 018023ce5..3289520ac 100644
--- a/packages/theme/system/utils/_position.less
+++ b/packages/theme/system/utils/_position.less
@@ -50,10 +50,10 @@
  */
 .fixed-top {
   position: fixed;
+  z-index: @zindex-fixed;
   top: 0;
   right: 0;
   left: 0;
-  z-index: @zindex-fixed;
 }
 
 /**
@@ -63,8 +63,8 @@
  */
 .fixed-bottom {
   position: fixed;
+  z-index: @zindex-fixed;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: @zindex-fixed;
 }
diff --git a/packages/theme/system/utils/_scrollbar.less b/packages/theme/system/utils/_scrollbar.less
index 237aea03c..e43476046 100644
--- a/packages/theme/system/utils/_scrollbar.less
+++ b/packages/theme/system/utils/_scrollbar.less
@@ -20,6 +20,7 @@
       }
     }
   }
+  /* stylelint-disable-next-line order/order */
   .scrollbar-inner-mixin(@scrollbar-enabled);
 }
 
diff --git a/packages/theme/system/widgets/_abs.less b/packages/theme/system/widgets/_abs.less
index bdbb78a0f..bc1a1d77b 100644
--- a/packages/theme/system/widgets/_abs.less
+++ b/packages/theme/system/widgets/_abs.less
@@ -6,8 +6,8 @@
   .abs-center {
     position: absolute;
     inset: 0;
-    margin: auto;
     overflow: auto;
+    margin: auto;
 
     &.abs-fixed {
       position: fixed;
diff --git a/packages/theme/system/widgets/_half-float.less b/packages/theme/system/widgets/_half-float.less
index efd244870..bfd85e19d 100644
--- a/packages/theme/system/widgets/_half-float.less
+++ b/packages/theme/system/widgets/_half-float.less
@@ -24,10 +24,11 @@
 
     .half-float-bottom {
       position: absolute;
-      left: 50%;
       z-index: 2;
+      left: 50%;
     }
 
+    /* stylelint-disable-next-line order/order */
     .for-each(@hafl-float-size, {
       &.half-float-@{adKey} {
         margin-bottom: ((@adValue / 2) + 10);
diff --git a/packages/theme/system/widgets/_masonry-grid.less b/packages/theme/system/widgets/_masonry-grid.less
index 27a0a545d..3a05efae0 100644
--- a/packages/theme/system/widgets/_masonry-grid.less
+++ b/packages/theme/system/widgets/_masonry-grid.less
@@ -15,10 +15,10 @@
    */
   .row-masonry {
     position: relative;
+    column-gap: @masonry-column-gap;
     width: 100%;
     margin: 0;
     padding: 0;
-    column-gap: @masonry-column-gap;
 
     > .col-masonry {
       display: inline-block;
@@ -32,6 +32,7 @@
     }
   }
 
+  /* stylelint-disable-next-line order/order */
   .for-each(@grid-breakpoints, {
     @media only screen and (min-width: @adValue) {
       .loopColumn(@pos: 1) when (@pos < 10) {
diff --git a/packages/theme/theme-btn/style/index.less b/packages/theme/theme-btn/style/index.less
index 069087a81..eafa0de29 100644
--- a/packages/theme/theme-btn/style/index.less
+++ b/packages/theme/theme-btn/style/index.less
@@ -2,20 +2,20 @@
 
 .widget-theme-btn-mixin(@enabled) when(@enabled=true) {
   @{theme-btn-prefix} {
+    cursor: pointer;
     position: fixed;
+    z-index: 2147483640;
     right: 32px;
     bottom: 102px;
-    z-index: 2147483640;
     display: flex;
     flex-direction: column;
-    cursor: pointer;
 
     &-active {
       width: 44px;
       height: 44px;
-      color: @primary-color;
       font-size: 22px;
       line-height: 44px;
+      color: @primary-color;
     }
 
     .ant-avatar {
diff --git a/schematics/application/index.ts b/schematics/application/index.ts
index c29d7ff5a..205bba54c 100644
--- a/schematics/application/index.ts
+++ b/schematics/application/index.ts
@@ -43,7 +43,6 @@ import {
   writePackage,
   ZORROVERSION
 } from '../utils';
-import { addImportNotation } from '../utils/less';
 import { addESLintRule, UpgradeMainVersions } from '../utils/versions';
 
 let project: ProjectDefinition;
@@ -189,10 +188,9 @@ function addCodeStylesToPackageJson(): Rule {
         `lint-staged@DEP-0.0.0-PLACEHOLDER`,
         `prettier@DEP-0.0.0-PLACEHOLDER`,
         `stylelint@DEP-0.0.0-PLACEHOLDER`,
-        `stylelint-config-rational-order@DEP-0.0.0-PLACEHOLDER`,
         `stylelint-config-standard@DEP-0.0.0-PLACEHOLDER`,
         `stylelint-declaration-block-no-ignored-properties@DEP-0.0.0-PLACEHOLDER`,
-        `stylelint-order@DEP-0.0.0-PLACEHOLDER`
+        `stylelint-config-clean-order@DEP-0.0.0-PLACEHOLDER`
       ],
       'devDependencies'
     );
@@ -388,7 +386,6 @@ export default function (options: ApplicationOptions): Rule {
       addCodeStylesToPackageJson(),
       addSchematics(options),
       addESLintRule(context, false),
-      addImportNotation(),
       // files
       removeOrginalFiles(),
       addFilesToRoot(options),
diff --git a/schematics/utils/less.ts b/schematics/utils/less.ts
deleted file mode 100644
index e04f1fd1e..000000000
--- a/schematics/utils/less.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Rule, Tree } from '@angular-devkit/schematics';
-
-import { readJSON, writeJSON } from './json';
-
-export function addImportNotation(): Rule {
-  return (tree: Tree) => {
-    const filePath = '.stylelintrc';
-    const json = readJSON(tree, filePath);
-    if (json == null) return tree;
-    if (!json.rules) json.rules = {};
-    json.rules['import-notation'] = 'string';
-    writeJSON(tree, filePath, json);
-    return tree;
-  };
-}
diff --git a/scripts/ci/build-schematics.sh b/scripts/ci/build-schematics.sh
index a460d2401..f60ee1c51 100755
--- a/scripts/ci/build-schematics.sh
+++ b/scripts/ci/build-schematics.sh
@@ -62,7 +62,7 @@ copyFiles() {
     "${1}.eslintrc.js|${2}application/files/root/.eslintrc.js"
     "${1}.prettierignore|${2}application/files/root/.prettierignore"
     "${1}.prettierrc.js|${2}application/files/root/.prettierrc.js"
-    "${1}.stylelintrc|${2}application/files/root/.stylelintrc"
+    "${1}.stylelintrc.js|${2}application/files/root/.stylelintrc.js"
     "${1}.nvmrc|${2}application/files/root"
     "${1}proxy.conf.js|${2}application/files/root"
     "${1}.husky|${2}application/files/root/.husky"
diff --git a/scripts/ci/utils.sh b/scripts/ci/utils.sh
index 15c0043ca..5bffed319 100644
--- a/scripts/ci/utils.sh
+++ b/scripts/ci/utils.sh
@@ -18,10 +18,9 @@ DEPENDENCIES=$(node -p "
     'ajv',
     'ajv-formats',
     'screenfull',
-    'stylelint-config-rational-order',
     'stylelint-config-standard',
     'stylelint-declaration-block-no-ignored-properties',
-    'stylelint-order',
+    'stylelint-config-clean-order',
     'stylelint',
     '@antv/data-set',
     '@antv/g2',
diff --git a/src/styles/_colors.less b/src/styles/_colors.less
index fd2060df8..ebbf6378f 100644
--- a/src/styles/_colors.less
+++ b/src/styles/_colors.less
@@ -1,3 +1,4 @@
+/* stylelint-disable order/order */
 .make-palette(@color, @index: 1) when (@index <= 10) {
   .palette-@{color}-@{index} {
     @background: '@{color}-@{index}';
@@ -74,16 +75,16 @@
       position: relative;
       top: -3px;
       margin-left: 16px;
-      font-size: 14px;
       font-family: Consolas, sans-serif;
+      font-size: 14px;
     }
 
     &-validation {
       position: relative;
       top: -3px;
       margin-left: 16px;
-      color: @error-color;
       font-size: 13px;
+      color: @error-color;
 
       &-dark {
         margin-left: 0;
@@ -93,19 +94,7 @@
 }
 
 .main-color {
-  .make-palette(blue);
-  .make-palette(purple);
-  .make-palette(cyan);
-  .make-palette(green);
-  .make-palette(magenta);
-  .make-palette(red);
-  .make-palette(volcano);
-  .make-palette(orange);
-  .make-palette(gold);
-  .make-palette(yellow);
-  .make-palette(lime);
-  .make-palette(geekblue);
-  .make-palette(gray);
+  text-align: left;
 
   .palette-gray-11 {
     background: @gray-11;
@@ -119,17 +108,15 @@
     background: @gray-13;
   }
 
-  text-align: left;
-
   &-item {
+    cursor: pointer;
     position: relative;
     height: 44px;
     margin-right: 4px;
     padding: 0 12px;
-    font-size: 14px;
     font-family: Consolas, sans-serif;
+    font-size: 14px;
     line-height: 44px;
-    cursor: pointer;
     transition: all 0.2s;
 
     &:first-child {
@@ -154,28 +141,41 @@
   &-item &-value {
     position: relative;
     left: 3px;
-    float: right;
-    transform: scale(0.85);
     transform-origin: 100% 50%;
+    transform: scale(0.85);
+    float: right;
     opacity: 0;
     transition: all 0.3s;
   }
+  .make-palette(blue);
+  .make-palette(purple);
+  .make-palette(cyan);
+  .make-palette(green);
+  .make-palette(magenta);
+  .make-palette(red);
+  .make-palette(volcano);
+  .make-palette(orange);
+  .make-palette(gold);
+  .make-palette(yellow);
+  .make-palette(lime);
+  .make-palette(geekblue);
+  .make-palette(gray);
 }
 
 .color-title {
   margin: 0 0 24px;
-  color: #5c6b77;
-  font-weight: 500;
   font-size: 22px;
+  font-weight: 500;
+  color: #5c6b77;
   text-align: center;
   text-transform: capitalize;
 }
 
 .color-description {
   display: block;
-  color: #777;
-  font-weight: lighter;
   font-size: 14px;
+  font-weight: lighter;
+  color: #777;
 }
 
 .main-color:hover {
@@ -235,9 +235,9 @@
       position: absolute;
       bottom: 0;
       left: 0;
+      transform-origin: unset;
       width: 100%;
       text-align: center;
-      transform-origin: unset;
     }
 
     &:hover {
diff --git a/src/styles/_common.less b/src/styles/_common.less
index 105861564..1d6daae6b 100644
--- a/src/styles/_common.less
+++ b/src/styles/_common.less
@@ -3,9 +3,9 @@ html.rtl {
 }
 
 body {
-  color: @site-text-color;
-  font-size: 14px;
   font-family: @font-family;
+  font-size: 14px;
+  color: @site-text-color;
   background: @body-background;
   transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
@@ -22,9 +22,9 @@ a {
 
 .fetching {
   position: absolute;
+  z-index: 99;
   top: 16px;
   left: 16px;
-  z-index: 99;
 }
 
 #header,
diff --git a/src/styles/_content.less b/src/styles/_content.less
index e7d4e7530..af9c54a61 100644
--- a/src/styles/_content.less
+++ b/src/styles/_content.less
@@ -20,9 +20,9 @@
   z-index: 1;
 
   &-inner {
+    overflow: hidden;
     height: 100%;
     max-height: 100vh;
-    overflow: hidden;
   }
 
   &:hover &-inner {
@@ -55,13 +55,13 @@
       font-size: 13px;
 
       &::after {
+        content: '';
         position: relative;
         top: 12px;
         display: block;
         width: calc(100% - 20px);
         height: 1px;
         background: @border-color-split;
-        content: '';
       }
     }
 
@@ -117,8 +117,8 @@
       position: absolute;
       top: 16px;
       right: -10px;
-      color: @primary-color;
       font-size: 12px;
+      color: @primary-color;
       opacity: 0;
       transition: all 0.3s;
     }
@@ -130,8 +130,8 @@
 
   .chinese {
     margin-left: 6px;
-    font-weight: 400;
     font-size: 12px;
+    font-weight: 400;
     opacity: 0.67;
   }
 }
diff --git a/src/styles/_custom.less b/src/styles/_custom.less
index 172931ed9..88b5be8ed 100644
--- a/src/styles/_custom.less
+++ b/src/styles/_custom.less
@@ -5,18 +5,18 @@
 }
 
 .copy-import-module {
+  cursor: pointer;
   padding: 2px 6px;
-  color: #fff;
   font-size: 12px;
+  color: #fff;
   background: @highlight-color;
   border-radius: 34px;
-  cursor: pointer;
 }
 
 .menu-deprecated {
-  opacity: 0.5;
-
   .ant-badge {
+    color: @error-color;
     text-decoration: line-through;
+    opacity: 0.5;
   }
 }
diff --git a/src/styles/_demo.less b/src/styles/_demo.less
index f14b608b2..992c04326 100644
--- a/src/styles/_demo.less
+++ b/src/styles/_demo.less
@@ -44,11 +44,11 @@
   }
 
   &-expand-trigger {
+    cursor: pointer;
     position: relative;
     margin-left: 12px;
-    color: #3b4357;
     font-size: 20px;
-    cursor: pointer;
+    color: #3b4357;
     opacity: 0.75;
     transition: all 0.3s;
 
@@ -80,9 +80,9 @@
 
     a,
     a:hover {
-      color: @site-text-color;
-      font-weight: 500;
       font-size: @font-size-base;
+      font-weight: 500;
+      color: @site-text-color;
     }
 
     .edit-button .anticon {
@@ -98,11 +98,11 @@
     position: absolute;
     top: 7px;
     right: -16px;
+    transform: scale(0.9);
     padding-right: 6px;
     font-size: 12px;
     text-decoration: none;
     background: inherit;
-    transform: scale(0.9);
 
     .ant-row-rtl & {
       right: auto;
@@ -167,16 +167,16 @@
 
     &-show,
     &-hide {
+      cursor: pointer;
       width: 16px;
       max-width: 100%;
       height: 16px;
-      cursor: pointer;
       transition: all 0.4s;
     }
 
     &-show {
-      opacity: 0.55;
       pointer-events: auto;
+      opacity: 0.55;
 
       &:hover {
         opacity: 1;
@@ -184,8 +184,8 @@
     }
 
     &-hide {
-      display: none;
       pointer-events: none;
+      display: none;
     }
 
     &.ant-tooltip-open .code-expand-icon-show {
@@ -197,8 +197,8 @@
     position: relative;
 
     &-wrapper {
-      display: none;
       overflow: auto;
+      display: none;
       border-radius: 0 0 @border-radius-base @border-radius-base;
 
       &-expand {
@@ -223,8 +223,8 @@
     justify-content: center;
     padding: 12px;
     text-align: center;
-    border-top: 1px dashed @site-border-color-split;
     opacity: 0.7;
+    border-top: 1px dashed @site-border-color-split;
     transition: opacity 0.3s;
 
     &:hover {
@@ -251,8 +251,8 @@
   }
 
   &-code-icon {
-    color: @site-text-color-secondary;
     cursor: pointer;
+    color: @site-text-color-secondary;
     transition: all 0.24s;
 
     &:hover {
@@ -260,8 +260,8 @@
     }
 
     &.anticon-check {
-      color: @green-6 !important;
       font-weight: bold;
+      color: @green-6 !important;
     }
   }
 
@@ -272,9 +272,9 @@
     code {
       display: block;
       padding: 16px 32px;
-      color: @site-text-color;
       font-size: 14px;
       line-height: 2;
+      color: @site-text-color;
       background: @component-background;
       border: none;
       border-radius: 2px;
@@ -290,6 +290,7 @@
   box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
 
   &::before {
+    content: '';
     position: absolute;
     top: -1.25em;
     left: 1em;
@@ -299,10 +300,10 @@
     background-color: #f44;
     border-radius: 50%;
     box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
-    content: '';
   }
 
   &::after {
+    content: '';
     position: absolute;
     top: -2em;
     left: 5.5em;
@@ -312,12 +313,11 @@
     border-right: 0.8em solid transparent;
     border-bottom: 2em solid white;
     border-left: 0.8em solid transparent;
-    content: '';
   }
 
   .browser-scroll {
-    height: 100%;
     overflow: auto;
+    height: 100%;
     background: #f5f5f5;
   }
 }
diff --git a/src/styles/_drawer.less b/src/styles/_drawer.less
index 7050af92e..bde9e8377 100644
--- a/src/styles/_drawer.less
+++ b/src/styles/_drawer.less
@@ -1,12 +1,12 @@
 @drawer-width: 60vw;
 
 .drawer {
+  pointer-events: none;
   position: fixed;
-  top: 0;
   z-index: 9999;
+  top: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none;
 
   > * {
     transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
@@ -22,8 +22,8 @@
   &-mask {
     top: 0;
     width: 100%;
-    background: #000;
     opacity: 0;
+    background: #000;
   }
 
   &-content-wrapper {
@@ -34,15 +34,17 @@
   }
 
   &-content {
-    height: 100%;
     overflow: auto;
+    height: 100%;
   }
 
   &-button {
+    pointer-events: auto;
+    cursor: pointer;
     position: absolute;
+    z-index: 0;
     top: 72px;
     right: -40px;
-    z-index: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,19 +56,18 @@
     background: @component-background;
     border-radius: 0 4px 4px 0;
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-    pointer-events: auto;
   }
 
   &-open {
+    pointer-events: auto;
     transform: translateX(@drawer-width);
     transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) 0s;
-    pointer-events: auto;
 
     .drawer-mask {
       opacity: 0.3;
     }
   }
+
   @media (max-width: @mobile-max) {
     .ant-menu-inline .ant-menu-item::after,
     .ant-menu-vertical .ant-menu-item::after {
diff --git a/src/styles/_footer.less b/src/styles/_footer.less
index d98f850fe..1caedd359 100644
--- a/src/styles/_footer.less
+++ b/src/styles/_footer.less
@@ -3,10 +3,10 @@
 
 @{footer-prefix} {
   position: relative;
-  display: block;
   clear: both;
-  color: rgba(255, 255, 255, 0.65);
+  display: block;
   font-size: 14px;
+  color: rgba(255, 255, 255, 0.65);
   background-color: #000;
   box-shadow: 0 1000px 0 1000px #fff;
 
@@ -21,8 +21,8 @@
     > h2 {
       position: relative;
       margin: 0 auto 24px;
-      font-weight: 500;
       font-size: 16px;
+      font-weight: 500;
 
       > .title-icon {
         width: 27px;
@@ -33,8 +33,8 @@
         position: absolute;
         top: 3px;
         left: -22px;
-        color: #aaa;
         font-size: 16px;
+        color: #aaa;
       }
     }
 
@@ -71,13 +71,13 @@
 }
 
 .theme-color {
+  cursor: pointer;
   display: inline-block;
   padding: 4px;
   vertical-align: middle;
   background: #fff;
   border-radius: 2px;
   box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
-  cursor: pointer;
 
   &-value {
     width: 80px;
diff --git a/src/styles/_header.less b/src/styles/_header.less
index 0dd438565..fd46d1c5f 100644
--- a/src/styles/_header.less
+++ b/src/styles/_header.less
@@ -58,15 +58,15 @@
 }
 
 #logo {
+  overflow: hidden;
   height: @header-height;
   padding-left: 40px;
-  overflow: hidden;
-  color: @site-heading-color;
-  font-size: 18px;
   font-family: Avenir, @font-family, sans-serif;
+  font-size: 18px;
   line-height: @header-height;
-  white-space: nowrap;
+  color: @site-heading-color;
   text-decoration: none;
+  white-space: nowrap;
 
   .ant-row-rtl & {
     float: right;
@@ -113,13 +113,13 @@
   }
 
   .anticon {
+    pointer-events: none;
     position: absolute;
-    top: 50%;
     z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
     flex: none;
     color: @search-icon-color;
-    transform: translateY(-50%);
-    pointer-events: none;
   }
 
   input {
@@ -131,14 +131,14 @@
     border: 0;
     box-shadow: none;
 
+    &::placeholder {
+      color: #a3b1bf;
+    }
+
     .ant-row-rtl & {
       padding-right: 20px;
       padding-left: 11px;
     }
-
-    &::placeholder {
-      color: #a3b1bf;
-    }
   }
 
   // ================ Narrow ================
@@ -163,10 +163,10 @@
     }
 
     input {
+      cursor: pointer;
       max-width: none;
       padding-right: 20px;
       padding-left: 11px;
-      cursor: pointer;
 
       .ant-row-rtl & {
         padding-right: 11px;
@@ -193,6 +193,10 @@
     border: none;
     box-shadow: @box-shadow-base;
 
+    &::before {
+      display: none;
+    }
+
     [class^='ds-dataset-'] {
       background: @component-background;
       border: none;
@@ -201,10 +205,6 @@
         background: @component-background;
       }
     }
-
-    &::before {
-      display: none;
-    }
   }
 
   .algolia-docsearch-suggestion--title {
@@ -217,19 +217,19 @@
 }
 
 .nav-phone-icon {
+  cursor: pointer;
   position: absolute;
+  z-index: 1;
   top: 25px;
   right: 30px;
-  z-index: 1;
   width: 16px;
   height: 22px;
-  cursor: pointer;
 }
 
 #nav {
   height: 100%;
-  font-size: 14px;
   font-family: Avenir, @font-family, sans-serif;
+  font-size: 14px;
   border: 0;
 
   &.ant-menu-horizontal {
@@ -242,14 +242,14 @@
       line-height: @header-height - @menu-item-border - 2px;
       border-top: @menu-item-border solid transparent;
 
+      &::after {
+        content: none;
+      }
+
       &:hover {
         border-top: @menu-item-border solid @primary-color;
         border-bottom: none;
       }
-
-      &::after {
-        content: none;
-      }
     }
 
     & .ant-menu-submenu-title .anticon {
diff --git a/src/styles/_hljs.less b/src/styles/_hljs.less
index 5dd41c214..3d0b109aa 100644
--- a/src/styles/_hljs.less
+++ b/src/styles/_hljs.less
@@ -6,17 +6,17 @@
 
 code[class*='hljs'],
 pre[class*='hljs'] {
-  color: black;
-  line-height: 1.5;
   direction: ltr;
-  white-space: pre;
+  line-height: 1.5;
+  hyphens: none;
+  color: black;
   text-align: left;
   text-shadow: 0 1px white;
-  word-wrap: normal;
   word-break: normal;
   word-spacing: normal;
+  word-wrap: normal;
   tab-size: 4;
-  hyphens: none;
+  white-space: pre;
   background: none;
 }
 
@@ -42,9 +42,9 @@ code[class*='hljs'] ::selection {
 
 /* Code blocks */
 pre[class*='hljs'] {
+  overflow: auto;
   margin: 1.2em 0;
   padding: 1em;
-  overflow: auto;
 }
 
 :not(pre) > code[class*='hljs'],
@@ -188,9 +188,9 @@ pre[class*='hljs'] {
 }
 
 .hljs {
+  overflow-x: auto;
   display: block;
   padding: 0.5em;
-  overflow-x: auto;
   color: #4d4d4c;
   background: white;
 }
@@ -215,6 +215,6 @@ pre[class*='hljs'] {
 }
 
 .code-box-code-copy.anticon-check {
-  color: #00a854 !important;
   font-weight: 700;
+  color: #00a854 !important;
 }
diff --git a/src/styles/_home.less b/src/styles/_home.less
index 324d5d5ff..2785d7dfa 100644
--- a/src/styles/_home.less
+++ b/src/styles/_home.less
@@ -27,18 +27,18 @@
     &-wrapper {
       position: relative;
       overflow: inherit;
-      color: @index-home-color;
       font-family: Avenir, 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
         'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
       font-variant: tabular-nums;
+      color: @index-home-color;
     }
 
     h2 {
       padding: 80px 0 40px;
-      color: @index-home-color;
-      font-weight: 400;
       font-size: 38px;
+      font-weight: 400;
       line-height: 46px;
+      color: @index-home-color;
       text-align: center;
     }
   }
@@ -63,9 +63,9 @@
 
       h1 {
         margin: 12px 0;
-        font-size: 54px;
         font-family: Futura, 'Helvetica Neue For Number', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC',
           'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 54px;
       }
 
       p {
@@ -96,10 +96,10 @@
       position: absolute;
       right: 0;
       bottom: 0;
+      overflow: hidden;
       width: 46%;
       max-width: 482px;
       height: 420px;
-      overflow: hidden;
 
       img {
         max-height: 100%;
@@ -115,13 +115,10 @@
 
     &__bg {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
+      transform: skewY(-4.5deg);
       margin: 0;
       background: @index-home-bg;
-      transform: skewY(-4.5deg);
 
       &-bottom {
         position: absolute;
@@ -160,8 +157,8 @@
   }
 
   .page-theme {
-    margin-bottom: 48px;
     overflow: hidden;
+    margin-bottom: 48px;
     background: #fff;
 
     &__item {
@@ -247,6 +244,7 @@
       margin-right: 0;
       margin-left: 16px;
     }
+
     @media (max-width: @screen-md-max) {
       #logo {
         float: left;
diff --git a/src/styles/_markdown.less b/src/styles/_markdown.less
index a80924e80..15ffeab60 100644
--- a/src/styles/_markdown.less
+++ b/src/styles/_markdown.less
@@ -1,7 +1,7 @@
 .markdown {
-  color: @site-text-color;
   font-size: 14px;
   line-height: 2;
+  color: @site-text-color;
 }
 
 .highlight {
@@ -25,11 +25,11 @@
 .markdown h1 {
   margin-top: 8px;
   margin-bottom: 20px;
-  color: @site-heading-color;
-  font-weight: 500;
-  font-size: 30px;
   font-family: Avenir, @font-family, sans-serif;
+  font-size: 30px;
+  font-weight: 500;
   line-height: 38px;
+  color: @site-heading-color;
 
   .subtitle {
     margin-left: 12px;
@@ -53,9 +53,9 @@
 .markdown h6 {
   clear: both;
   margin: 1.6em 0 0.6em;
-  color: @site-heading-color;
-  font-weight: 500;
   font-family: Avenir, @font-family, sans-serif;
+  font-weight: 500;
+  color: @site-heading-color;
 }
 
 .markdown h3 {
@@ -138,11 +138,11 @@
 }
 
 .markdown pre code {
+  overflow: auto;
   margin: 0;
   padding: 0;
-  overflow: auto;
-  color: @site-text-color;
   font-size: @font-size-base - 1px;
+  color: @site-text-color;
   background: #f5f5f5;
   border: none;
 }
@@ -153,13 +153,13 @@
 }
 
 .markdown > table {
-  width: 100%;
-  margin: 8px 0 16px;
   table-layout: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
   empty-cells: show;
+  width: 100%;
+  margin: 8px 0 16px;
   border: 1px solid @site-border-color-split;
-  border-collapse: collapse;
-  border-spacing: 0;
 
   tbody tr {
     transition: all 0.3s;
@@ -172,16 +172,16 @@
   th {
     &:nth-child(1),
     &:nth-child(2) {
-      white-space: nowrap;
       word-break: keep-all;
+      white-space: nowrap;
     }
   }
 }
 
 /* stylelint-disable-next-line no-duplicate-selectors */
 .markdown > table th {
-  color: #5c6b77;
   font-weight: 500;
+  color: #5c6b77;
   // white-space: nowrap;
   background: rgba(0, 0, 0, 0.02);
 }
@@ -196,8 +196,8 @@
 .markdown blockquote {
   margin: 1em 0;
   padding-left: 0.8em;
-  color: @site-text-color-secondary;
   font-size: 90%;
+  color: @site-text-color-secondary;
   border-left: 4px solid @site-border-color-split;
 
   .ant-row-rtl & {
@@ -224,8 +224,8 @@
 }
 
 .markdown .waiting {
-  color: #ccc;
   cursor: not-allowed;
+  color: #ccc;
 }
 
 .markdown a.edit-button {
@@ -271,12 +271,12 @@
   overflow-x: auto;
 
   table {
+    table-layout: auto;
     min-width: 720px;
     margin: 2em 0;
-    font-size: @font-size-base - 1px;
     font-family: @code-family;
+    font-size: @font-size-base - 1px;
     line-height: @line-height-base;
-    table-layout: auto;
     border: 1px solid @border-color-split;
 
     th,
@@ -292,27 +292,27 @@
       border-width: 0 0 2px;
 
       &:nth-child(2) {
-        white-space: normal;
         word-break: normal;
+        white-space: normal;
       }
 
       &:nth-child(4),
       &:nth-child(5) {
-        white-space: nowrap;
         word-break: keep-all;
+        white-space: nowrap;
       }
     }
 
     td {
       &:first-child {
-        color: @gray-8;
         font-weight: 600;
+        color: @gray-8;
       }
 
       &:nth-child(3) {
         width: 22%;
-        color: @magenta-7;
         font-size: @font-size-base - 1px;
+        color: @magenta-7;
         word-break: break-all;
       }
 
@@ -333,8 +333,8 @@
 [id^='components-grid-demo-'] {
   .demo-row,
   .code-box-demo .demo-row {
-    margin-bottom: 8px;
     overflow: hidden;
+    margin-bottom: 8px;
     background-image: linear-gradient(
       90deg,
       #f5f5f5 4.16666667%,
@@ -410,8 +410,8 @@
     margin-top: 0;
     margin-bottom: 0;
     padding: 30px 0;
-    color: @white;
     font-size: 18px;
+    color: @white;
     text-align: center;
     border: none;
   }
diff --git a/src/styles/_not-found.less b/src/styles/_not-found.less
index 461acc196..6c1d6c767 100644
--- a/src/styles/_not-found.less
+++ b/src/styles/_not-found.less
@@ -1,17 +1,14 @@
 #page-404 {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   z-index: 100;
+  inset: 0;
   width: 100%;
   height: 100%;
   background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');
   background-repeat: no-repeat;
+  background-attachment: fixed;
   background-position: center;
   background-size: 100%;
-  background-attachment: fixed;
 
   section {
     position: absolute;
@@ -22,14 +19,14 @@
   }
 
   h1 {
-    color: @primary-color;
-    font-weight: 500;
     font-size: 120px;
+    font-weight: 500;
+    color: @primary-color;
   }
 
   .links {
-    color: @site-text-color;
     font-size: 18px;
+    color: @site-text-color;
 
     a {
       margin-left: 8px;
diff --git a/src/styles/_prev-next.less b/src/styles/_prev-next.less
index 8706c28a6..30de04778 100644
--- a/src/styles/_prev-next.less
+++ b/src/styles/_prev-next.less
@@ -1,8 +1,8 @@
 .prev-next-nav {
+  overflow: hidden;
   width: ~'calc(100% - 128px)';
   margin-right: 64px;
   margin-left: 64px;
-  overflow: hidden;
   font-size: 14px;
   border-top: 1px solid @site-border-color-split;
 
@@ -29,8 +29,8 @@
       position: relative;
       left: 0;
       margin-right: 1em;
-      color: @site-text-color-secondary;
       font-size: 12px;
+      color: @site-text-color-secondary;
       transition: all 0.3s;
 
       .ant-row-rtl & {
@@ -69,8 +69,8 @@
       position: relative;
       right: 0;
       margin-left: 1em;
-      color: @site-text-color-secondary;
       font-size: 12px;
+      color: @site-text-color-secondary;
       transition: all 0.3s;
 
       .ant-row-rtl & {
diff --git a/src/styles/_theme-btn.less b/src/styles/_theme-btn.less
index 4fbdf3347..32523a52a 100644
--- a/src/styles/_theme-btn.less
+++ b/src/styles/_theme-btn.less
@@ -1,11 +1,11 @@
 .theme-btn {
+  cursor: pointer;
   position: fixed;
+  z-index: 2147483640;
   right: 32px;
   bottom: 102px;
-  z-index: 2147483640;
   display: flex;
   flex-direction: column;
-  cursor: pointer;
 
   &-tooltip {
     .ant-tooltip-inner {
@@ -20,9 +20,9 @@
   &-active {
     width: 44px;
     height: 44px;
-    color: @primary-color;
     font-size: 22px;
     line-height: 44px;
+    color: @primary-color;
   }
 
   & &-avatar {
diff --git a/src/styles/_utils.less b/src/styles/_utils.less
index ad8492f23..98bbf4bc0 100644
--- a/src/styles/_utils.less
+++ b/src/styles/_utils.less
@@ -2,10 +2,10 @@
   position: relative;
 
   &::before {
-    color: @volcano-6;
-    font-style: normal;
     cursor: pointer;
     content: 'D';
+    font-style: normal;
+    color: @volcano-6;
   }
 }
 
diff --git a/src/styles/dark.less b/src/styles/dark.less
index ef4e5f9d9..07fe603b4 100644
--- a/src/styles/dark.less
+++ b/src/styles/dark.less
@@ -10,9 +10,9 @@
   select:-webkit-autofill:hover,
   select:-webkit-autofill:focus {
     border: 1px solid @border-color-base;
-    -webkit-text-fill-color: @text-color;
     box-shadow: none;
     transition: background-color 5000s ease-in-out 0s;
+    -webkit-text-fill-color: @text-color;
   }
 
   #header {
@@ -29,12 +29,6 @@
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
   }
 
-  @media (max-width: @mobile-max) {
-    .header-menu .menu-site {
-      background: transparent;
-    }
-  }
-
   .toc-affix {
     .ant-affix {
       background: @component-background;
@@ -67,11 +61,11 @@
     }
 
     &-expand-trigger {
+      cursor: pointer;
       position: relative;
       margin-left: 12px;
-      color: #fff;
       font-size: 20px;
-      cursor: pointer;
+      color: #fff;
       opacity: 0.45;
       transition: all 0.3s;
 
@@ -232,8 +226,8 @@
       margin-top: 0;
       margin-bottom: 0;
       padding: 30px 0;
-      color: @black;
       font-size: 18px;
+      color: @black;
       text-align: center;
       border: none;
     }
@@ -374,9 +368,9 @@
   }
 
   .hljs {
+    overflow-x: auto;
     display: block;
     padding: 0.5em;
-    overflow-x: auto;
     color: #c0c5ce;
     background: #1c1d21;
   }
@@ -401,4 +395,10 @@
       color: @text-color;
     }
   }
+
+  @media (max-width: @mobile-max) {
+    .header-menu .menu-site {
+      background: transparent;
+    }
+  }
 }
diff --git a/src/styles/index.less b/src/styles/index.less
index 23b86ef31..e054e4a96 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,5 +1,4 @@
 @import './theme.less';
-
 @import './_colors.less';
 @import './_reset.less';
 @import './_common.less';
@@ -16,8 +15,6 @@
 @import './_ng.less';
 @import './_not-found.less';
 @import './_utils.less';
-
 @import './_home.less';
 @import './_custom.less';
-
 @import './dark.less';