Javascript 有没有一种方法可以；捆绑；来自CSS框架的规则，这样我就可以干燥我的HTML，而不需要使用SASS或JS模板？

我经常遇到类似Material这样的CSS框架的问题。当然，它们要求您使用一组类。但这意味着您的HTML开始变得超级不干燥，具有大量重复的

class=”“

属性

例如，您会得到如下结果：

<div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>

…但是当我的CSS编译时，它复制了我扩展的所有类的CSS。这严重地增加了我编译的CSS的大小

2.使用组件化CSS …或以其他方式使用自定义组件和指令。伪代码：

new Template('mybutton', ()=>{
  return <div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>
})

<mybutton></mybutton>

然后我编写了一些前端JS，用于查找该自定义属性，使用JSON文件映射其值，并将上面的HTML转换为：

<div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>

这样，我就可以使用框架并将其类捆绑在一起，而无需我的用户加载一堆冗余的CSS

这是一个疯狂的想法吗？已经有一些JS包可以做到这一点了吗？

我认为使用JS解析页面给最终用户带来的冲击（以及应用样式时的起伏）将比处理更大的css文件更糟糕。我想这取决于文件的增长。你说的“加大尺寸”是什么意思？

<div custom-attribute="mybutton"></div>

{
  "mybutton": "css-framework-class-1 css-framework-class-2 css-framework-class-3"
}

<div class="css-framework-class-1 css-framework-class-2 css-framework-class-3"></div>