diff --git a/src/modules/rules/index.ts b/src/modules/rules/index.ts
index d826c0c..8cc7b8f 100644
--- a/src/modules/rules/index.ts
+++ b/src/modules/rules/index.ts
@@ -12,10 +12,16 @@ import {
     isPageVideo,
     isPageWatchlater,
 } from '../../utils/pageType'
+
+import { IListItem, INumberItem, IStringItem, ISwitchItem } from '../../types/item'
+import { error } from '../../utils/logger'
+import { BiliCleanerStorage } from '../../utils/storage'
+
 import { bangumiGroups } from './bangumi'
 import { channelGroups } from './channel'
 import { commentGroups } from './comment'
 import { commonGroups } from './common'
+import { debugGroups } from './debug'
 import { dynamicGroups } from './dynamic'
 import { homepageGroups } from './homepage'
 import { liveGroups } from './live'
@@ -23,15 +29,12 @@ import { popularGroups } from './popular'
 import { searchGroups } from './search'
 import { spaceGroups } from './space'
 import { videoGroups } from './video'
+import { watchlaterGroups } from './watchlater'
 
-import { IListItem, INumberItem, IStringItem, ISwitchItem } from '../../types/item'
-import { error } from '../../utils/logger'
-import { BiliCleanerStorage } from '../../utils/storage'
 import bangumiStyle from './bangumi/index.scss?inline'
 import channelStyle from './channel/index.scss?inline'
 import commentStyle from './comment/index.scss?inline'
 import commonStyle from './common/index.scss?inline'
-import { debugGroups } from './debug'
 import dynamicStyle from './dynamic/index.scss?inline'
 import homepageStyle from './homepage/index.scss?inline'
 import liveStyle from './live/index.scss?inline'
@@ -39,87 +42,86 @@ import popularStyle from './popular/index.scss?inline'
 import searchStyle from './search/index.scss?inline'
 import spaceStyle from './space/index.scss?inline'
 import videoStyle from './video/index.scss?inline'
-import { watchlaterGroups } from './watchlater'
 import watchlaterStyle from './watchlater/index.scss?inline'
 
 /** 全部规则 */
 export const rules: Rule[] = [
     {
-        name: '首页',
+        name: 'homepage',
         groups: homepageGroups,
         style: homepageStyle,
         checkFn: isPageHomepage,
     },
     {
-        name: '普通播放页',
+        name: 'video',
         groups: videoGroups,
         style: videoStyle,
         checkFn: () => isPageVideo() || isPagePlaylist(),
     },
     {
-        name: '番剧播放页',
+        name: 'bangumi',
         groups: bangumiGroups,
         style: bangumiStyle,
         checkFn: isPageBangumi,
     },
     {
-        name: '动态页',
+        name: 'dynamic',
         groups: dynamicGroups,
         style: dynamicStyle,
         checkFn: isPageDynamic,
     },
     {
-        name: '直播页',
+        name: 'live',
         groups: liveGroups,
         style: liveStyle,
         checkFn: isPageLive,
     },
     {
-        name: '热门/排行榜页',
+        name: 'popular',
         groups: popularGroups,
         style: popularStyle,
         checkFn: isPagePopular,
     },
     {
-        name: '分区页',
+        name: 'channel',
         groups: channelGroups,
         style: channelStyle,
         checkFn: isPageChannel,
     },
     {
-        name: '空间页',
+        name: 'space',
         groups: spaceGroups,
         style: spaceStyle,
         checkFn: isPageSpace,
     },
     {
-        name: '搜索页',
+        name: 'search',
         groups: searchGroups,
         style: searchStyle,
         checkFn: isPageSearch,
     },
     {
-        name: '稍后再看页',
+        name: 'watchlater',
         groups: watchlaterGroups,
         style: watchlaterStyle,
         checkFn: isPageWatchlater,
     },
     {
-        name: '评论区',
+        name: 'comment',
         groups: commentGroups,
         style: commentStyle,
         isSpecial: true,
         checkFn: () => isPageVideo() || isPageBangumi() || isPageDynamic() || isPageSpace() || isPagePlaylist(),
     },
     {
-        name: '全站通用功能',
+        name: 'common',
         groups: commonGroups,
         style: commonStyle,
         isSpecial: true,
         checkFn: () => true,
     },
     {
-        name: '调试开关',
+        name: 'debug',
         groups: debugGroups,
         style: undefined,
         checkFn: isPageSpace,
@@ -162,7 +164,7 @@ export const loadStyles = () => {
         if (rule.checkFn() && rule.style) {
             try {
                 const style = document.createElement('style')
-                style.className = 'bili-cleaner-css'
+                style.className = `bili-cleaner-css ${rule.name}`
                 style.textContent = rule.style
                 document.documentElement?.appendChild(style)
             } catch (err) {
@@ -170,6 +172,125 @@ export const loadStyles = () => {
             }
         }
     }
+
+    // Style HMR
+    if (import.meta.env.DEV && import.meta.hot) {
+        import.meta.hot.accept(
+            [
+                './homepage/index.scss?inline',
+                './video/index.scss?inline',
+                './bangumi/index.scss?inline',
+                './dynamic/index.scss?inline',
+                './live/index.scss?inline',
+                './popular/index.scss?inline',
+                './channel/index.scss?inline',
+                './space/index.scss?inline',
+                './search/index.scss?inline',
+                './watchlater/index.scss?inline',
+                './comment/index.scss?inline',
+                './common/index.scss?inline',
+            ],
+            ([
+                homepageModule,
+                videoModule,
+                bangumiModule,
+                dynamicModule,
+                liveModule,
+                popularModule,
+                channelModule,
+                spaceModule,
+                searchModule,
+                watchlaterModule,
+                commentModule,
+                commonModule,
+            ]) => {
+                if (homepageModule) {
+                    const newCSS = homepageModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.homepage')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (videoModule) {
+                    const newCSS = videoModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.video')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (bangumiModule) {
+                    const newCSS = bangumiModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.bangumi')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (dynamicModule) {
+                    const newCSS = dynamicModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.dynamic')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (liveModule) {
+                    const newCSS = liveModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.live')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (popularModule) {
+                    const newCSS = popularModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.popular')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (channelModule) {
+                    const newCSS = channelModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.channel')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (spaceModule) {
+                    const newCSS = spaceModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.space')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (searchModule) {
+                    const newCSS = searchModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.search')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (watchlaterModule) {
+                    const newCSS = watchlaterModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.watchlater')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (commentModule) {
+                    const newCSS = commentModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.comment')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+                if (commonModule) {
+                    const newCSS = commonModule.default as string
+                    const style = document.querySelector('style.bili-cleaner-css.common')
+                    if (style && newCSS) {
+                        style.textContent = newCSS
+                    }
+                }
+            },
+        )
+    }
 }
 
 const loadSwitchItem = (item: ISwitchItem) => {