C#/Blazor技术栈中跨Razor、CSS及C#文件压缩CSS类名的理论可行性咨询

安全阿岳

2026-4-13

先跟你聊聊前端常见的CSS类名压缩方案，再说说我在Blazor上的困惑：

在HTML/CSS/JavaScript技术栈中，有一款gulp-minify-cssnames的Gulp插件可以实现CSS类名的压缩。我这里不想纠结它的具体实现细节，但可以提一下核心思路——它本质上是通过正则表达式，在HTML、CSS、JavaScript文件中批量替换带特定前后缀的类名字符串。

举个例子，原始的HTML代码是这样的：

<div class="menu--s--" id="main-menu--s--">
    <div class="menu__item--s--">1</div>
    <div class="menu__item--s--">2</div>
    <div class="menu__item--s-- .menu__item_active--s--">3</div>
</div>

对应的CSS代码：

.menu--s-- {color: red;}
.menu_top--s-- {color: black;}
.menu__item--s-- {color: green;}
.menu__item_active--s-- {color: blue;}
.menu__item_active--s--::before {content: 'active'}

还有JavaScript代码：

var $menuItems =  document.querySelectorAll('.menu__item--s--');
var $mainMenu = document.querySelector('#main-menu--s--');

经过插件处理后，会被转换成更简洁的版本：
处理后的HTML：

<div class="a0" id="a4">
    <div class="a2">1</div>
    <div class="a2">2</div>
    <div class="a2 a3">3</div>
</div>

处理后的CSS：

.a0 {color: red;}
.a1 {color: black;}
.a2 {color: green;}
.a3 {color: blue;}
.a3::before {content: 'active'}

处理后的JavaScript：

var $menuItems = document.querySelectorAll('.a2');
var $mainMenu = document.querySelector('#a4');

你可能会说，这种正则替换的方法不够精准，毕竟跨文件替换CSS类名本来就有风险——没错，而且这款插件甚至不区分标记类型。但不管怎么说，只要遵循BEM这类统一的命名规范，再配合对应的替换逻辑，就能避免破坏应用功能。不过我再强调一遍：这部分的实现细节不是重点，关键是要明确：在HTML/CSS/JS栈中，这种类名压缩的操作是可行的。

现在回到我的核心问题：在C#/Blazor技术栈中，这种跨Razor文件、样式表和C#逻辑文件压缩CSS类名的操作，理论上是否可行？

注意：我不是在问“有没有现成的类似工具”，而是想知道从技术原理上能不能实现——如果可行的话，我可以自己动手开发。

另外还要补充一点：我关心的不是“拿到最终输出的文件后怎么用正则替换”，而是要搞清楚：在项目的bin目录下，有没有哪些文件还保留着可识别、可跨文件同步替换的CSS类名？毕竟我之前主要做Pug/Stylus/TypeScript栈，那套是靠后处理输出的HTML/CSS/JS文件来实现的，但Blazor的编译模型不一样，我得先明确要针对哪些文件下手。

备注：内容来源于stack exchange，提问作者Takeshi Tokugawa YD