diff --git a/.gitignore b/.gitignore
index c928583eeeb1..17b9258429f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,7 +41,3 @@ src/icons/skin/build-icons/icons/*.png
 
 # CMake build directory
 build/
-
-# Web UI tools
-node_modules
-package-lock.json
diff --git a/src/webui/www/.gitignore b/src/webui/www/.gitignore
new file mode 100644
index 000000000000..2f85f13cb7f0
--- /dev/null
+++ b/src/webui/www/.gitignore
@@ -0,0 +1,5 @@
+# Web UI tools
+.eslintcache
+.stylelintcache
+node_modules
+package-lock.json
diff --git a/src/webui/www/.stylelintrc.json b/src/webui/www/.stylelintrc.json
deleted file mode 100644
index 55324a0dd449..000000000000
--- a/src/webui/www/.stylelintrc.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "extends": "stylelint-config-standard",
-  "plugins": [
-    "stylelint-order"
-  ],
-  "ignoreFiles": ["private/css/lib/*.css"],
-  "rules": {
-    "color-hex-length": null,
-    "comment-empty-line-before": null,
-    "comment-whitespace-inside": null,
-    "function-name-case": null,
-    "length-zero-no-unit": null,
-    "no-descending-specificity": null,
-    "order/properties-alphabetical-order": true,
-    "selector-class-pattern": null,
-    "selector-id-pattern": null,
-    "value-keyword-case": null
-  }
-}
diff --git a/src/webui/www/package.json b/src/webui/www/package.json
index 818d487385ff..7149a862829a 100644
--- a/src/webui/www/package.json
+++ b/src/webui/www/package.json
@@ -7,7 +7,7 @@
   },
   "scripts": {
     "format": "js-beautify -r *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && prettier --write **.css",
-    "lint": "eslint *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint **/*.css && html-validate private public"
+    "lint": "eslint --cache *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js && stylelint --cache **/*.css && html-validate private public"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "*",
diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css
index 865fc80513cb..9aeaf365f69e 100644
--- a/src/webui/www/private/css/Window.css
+++ b/src/webui/www/private/css/Window.css
@@ -99,7 +99,7 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha .handle {
-    background: #0f0;
+    background: #00ff00;
     font-size: 1px; /* For IE6 */
     height: 3px;
     opacity: 0;
@@ -111,7 +111,7 @@ div.mochaToolbarWrapper.bottom {
 
 /* Corner resize handles */
 .mocha .corner {
-    background: #f00;
+    background: #ff0000;
     height: 10px;
     width: 10px;
 }
@@ -229,7 +229,7 @@ div.mochaToolbarWrapper.bottom {
 /* Underlay */
 
 #windowUnderlay {
-    background: #fff;
+    background: #ffffff;
     left: 0;
     position: fixed;
     top: 0;
@@ -276,18 +276,18 @@ div.mochaToolbarWrapper.bottom {
 /* Modals */
 
 .modal2 {
-    border: 8px solid #fff;
+    border: 8px solid #ffffff;
 }
 
 .modal2 .mochaContentBorder {
-    border-width: 0px;
+    border-width: 0;
 }
 
 /* Window Themes */
 
 .mocha.no-canvas {
     background: #e5e5e5;
-    border: 1px solid #555;
+    border: 1px solid #555555;
 }
 
 .mocha.no-canvas .mochaTitlebar {
@@ -295,7 +295,7 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha.transparent .mochaTitlebar h3 {
-    color: #fff;
+    color: #ffffff;
     display: none;
 }
 
@@ -312,7 +312,7 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .mocha.notification .mochaContentBorder {
-    border-width: 0px;
+    border-width: 0;
 }
 
 .mocha.notification .mochaContentWrapper {
@@ -345,12 +345,12 @@ div.mochaToolbarWrapper.bottom {
 }
 
 .jsonExample .mochaTitlebar h3 {
-    color: #ddd;
+    color: #dddddd;
 }
 
 /* This does not work in IE6. */
 .isFocused.jsonExample .mochaTitlebar h3 {
-    color: #fff;
+    color: #ffffff;
 }
 
 #fxmorpherExample .mochaContentWrapper {
@@ -358,7 +358,7 @@ div.mochaToolbarWrapper.bottom {
 }
 
 #clock {
-    background: #fff;
+    background: #ffffff;
 }
 
 /* Workaround to make invisible buttons clickable */
diff --git a/src/webui/www/private/css/dynamicTable.css b/src/webui/www/private/css/dynamicTable.css
index 2cc9c7626432..be391f77e974 100644
--- a/src/webui/www/private/css/dynamicTable.css
+++ b/src/webui/www/private/css/dynamicTable.css
@@ -105,10 +105,10 @@ div:has(> div.dynamicTableFixedHeaderDiv):not(.invisible) {
 }
 
 .dynamicTableDiv thead th {
-    height: 0px !important;
-    line-height: 0px !important;
-    padding-bottom: 0px !important;
-    padding-top: 0px !important;
+    height: 0 !important;
+    line-height: 0 !important;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
 }
 
 /* Trackers table */
diff --git a/src/webui/www/private/css/noscript.css b/src/webui/www/private/css/noscript.css
index 090b572b866e..cb0063ac54e3 100644
--- a/src/webui/www/private/css/noscript.css
+++ b/src/webui/www/private/css/noscript.css
@@ -3,6 +3,6 @@
 }
 
 #noscript {
-    color: #f00;
+    color: #ff0000;
     text-align: center;
 }
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index 186d0f5e87e9..665300d91ea4 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -257,7 +257,7 @@ pre {
 
 hr {
     background-color: var(--color-background-default);
-    border: 0px;
+    border: 0;
     color: var(--color-text-default);
     height: 1px;
     margin-bottom: 6px;
@@ -435,8 +435,8 @@ a.propButton img {
 .sliderarea {
     background: #f2f2f2 url("../images/slider-area.gif") repeat-x;
     border: 1px solid #a3a3a3;
-    border-bottom: 1px solid #ccc;
-    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #cccccc;
+    border-left: 1px solid #cccccc;
     font-size: 1px;
     height: 7px;
     left: 0;
@@ -573,7 +573,7 @@ label.tristate {
     display: block;
     float: left;
     height: 13px;
-    margin: 0.15em 8px 5px 0px;
+    margin: 0.15em 8px 5px 0;
     overflow: hidden;
     text-indent: -999em;
     width: 13px;
@@ -785,20 +785,20 @@ td.generalLabel {
 
 .select-watched-folder-editable select {
     border: none;
-    bottom: 0px;
-    left: 0px;
+    bottom: 0;
+    left: 0;
     padding: 0;
     position: absolute;
-    top: 0px;
+    top: 0;
     width: 158px;
 }
 
 .select-watched-folder-editable input {
     border: none;
-    left: 0px;
+    left: 0;
     padding: 0;
     position: absolute;
-    top: 0px;
+    top: 0;
     width: 140px;
 }
 
diff --git a/src/webui/www/private/css/vanillaSelectBox.css b/src/webui/www/private/css/vanillaSelectBox.css
index 8191e5f1705e..63a38c776878 100644
--- a/src/webui/www/private/css/vanillaSelectBox.css
+++ b/src/webui/www/private/css/vanillaSelectBox.css
@@ -55,13 +55,13 @@ li[data-parent].open:not(.hidden-search) {
 }
 
 li.disabled {
-    background-color: #999;
+    background-color: #999999;
     cursor: not-allowed;
     opacity: 0.3;
 }
 
 li.overflow {
-    background-color: #999;
+    background-color: #999999;
     cursor: not-allowed;
     opacity: 0.3;
 }
@@ -140,7 +140,7 @@ li.short {
     height: 11px;
     margin-left: 22px;
     margin-right: 2px;
-    margin-top: 0px;
+    margin-top: 0;
     padding: 1px 3px 2px;
     width: 8px;
 }
@@ -151,7 +151,7 @@ li.short {
     float: left;
     font-size: inherit;
     height: 8px;
-    margin-left: 0px;
+    margin-left: 0;
     transform: rotate(45deg);
     width: 5px;
 }
@@ -194,7 +194,7 @@ li.short {
     font-weight: bold;
     margin-left: -22px;
     margin-right: 2px;
-    margin-top: 0px;
+    margin-top: 0;
     padding: 7px;
 }
 
diff --git a/src/webui/www/public/css/login.css b/src/webui/www/public/css/login.css
index 0b7efe8903cf..bbf25e92e5fb 100644
--- a/src/webui/www/public/css/login.css
+++ b/src/webui/www/public/css/login.css
@@ -28,7 +28,7 @@ body {
 }
 
 #error_msg {
-    color: #f00;
+    color: #ff0000;
     white-space: pre;
 }
 
diff --git a/src/webui/www/public/css/noscript.css b/src/webui/www/public/css/noscript.css
index 8897870b3eb8..f2631c6c6dc6 100644
--- a/src/webui/www/public/css/noscript.css
+++ b/src/webui/www/public/css/noscript.css
@@ -3,6 +3,6 @@
 }
 
 #noscript {
-    color: #f00;
+    color: #ff0000;
     text-align: center;
 }
diff --git a/src/webui/www/stylelint.config.mjs b/src/webui/www/stylelint.config.mjs
new file mode 100644
index 000000000000..bc4ba866be74
--- /dev/null
+++ b/src/webui/www/stylelint.config.mjs
@@ -0,0 +1,16 @@
+export default {
+    extends: "stylelint-config-standard",
+    plugins: [
+        "stylelint-order"
+    ],
+    ignoreFiles: ["private/css/lib/*.css"],
+    rules: {
+        "color-hex-length": "long",
+        "comment-empty-line-before": null,
+        "comment-whitespace-inside": null,
+        "no-descending-specificity": null,
+        "order/properties-alphabetical-order": true,
+        "selector-class-pattern": null,
+        "selector-id-pattern": null,
+    }
+};