diff --git a/.stylelintrc.json b/.stylelintrc.json
index 86751515..cd47c3ad 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,22 +1,25 @@
 {
-  "extends": [
-    "stylelint-config-html/vue",
-    "stylelint-config-standard",
-    "stylelint-config-prettier"
+  "extends": ["stylelint-config-html/vue", "stylelint-config-standard", "stylelint-config-prettier"],
+  "overrides": [
+    {
+      "customSyntax": "postcss-scss",
+      "files": ["**/*.scss"]
+    }
   ],
   "rules": {
+    "alpha-value-notation": "number",
+    "color-function-notation": "legacy",
+    "color-hex-length": null,
+    "no-descending-specificity": null,
+    "no-empty-source": null,
+    "selector-class-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",
+    "selector-id-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$",
     "selector-pseudo-class-no-unknown": [
       true,
       {
         "ignorePseudoClasses": ["deep"]
       }
     ],
-    "selector-class-pattern": "^(([a-z][a-zA-Z0-9_]+)|([a-z][a-z0-9]*)(-[a-zA-Z0-9_]+)*)$"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.scss"],
-      "customSyntax": "postcss-scss"
-    }
-  ]
+    "shorthand-property-no-redundant-values": null
+  }
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 765ced0b..071dcee1 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -132,7 +132,7 @@ p {
   margin: 8px 0;
 }
 
-.clearfix:after {
+.clearfix::after {
   content: ' ';
   display: block;
   clear: both;
diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index e6ef9af2..43a9d29f 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -173,6 +173,7 @@ export default defineComponent({
     }
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .action :deep(.svg-inline--fa) {
     padding-right: 4px;
   }
diff --git a/src/renderer/components/Settings.vue b/src/renderer/components/Settings.vue
index ffa8078b..bd023c96 100644
--- a/src/renderer/components/Settings.vue
+++ b/src/renderer/components/Settings.vue
@@ -119,6 +119,7 @@ export default defineComponent({
       height: 100%;
       user-select: none;
     }
+
     .setting-menu :deep(.icon) {
       margin-right: 9px;
     }
diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index ccc7742c..46e39fca 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -172,6 +172,7 @@ export default defineComponent({
 #timeline_space {
   height: 100%;
 }
+
 .page {
   margin-left: 180px;
   height: 100%;
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index 661c005f..cc10cba3 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -114,6 +114,7 @@ export default defineComponent({
 .image-viewer-leave-active {
   transition: opacity 0.5s;
 }
+
 .image-viewer-enter,
 .image-viewer-leave-to {
   opacity: 0;
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 35bc3bd2..0c12042a 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -556,8 +556,7 @@ export default defineComponent({
       .preview {
         box-sizing: border-box;
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
 
         .image-wrapper {
           position: relative;
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index a110aeb2..dda60bc1 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -493,6 +493,7 @@ export default defineComponent({
         width: 18px;
       }
     }
+
     .menu-item * {
       vertical-align: middle;
     }
@@ -500,7 +501,7 @@ export default defineComponent({
     .el-badge {
       vertical-align: top;
       line-height: 32px;
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 
diff --git a/src/renderer/components/molecules/Toot/Quote.vue b/src/renderer/components/molecules/Toot/Quote.vue
index 7ee2890b..69d00053 100644
--- a/src/renderer/components/molecules/Toot/Quote.vue
+++ b/src/renderer/components/molecules/Toot/Quote.vue
@@ -71,6 +71,7 @@ export default defineComponent({
         height: 20px;
       }
     }
+
     .body {
       margin-top: 4px;