增加HTML体积，减少css文件体积，是一个好的优化方案吗？

Question

比如我现在使用scss语法，循环一堆属性选择器，在平时页面开发的时候比如以前需要给一个div标签添加一个类名，比如:

<div class="demo1">我是一个div</div>

.demo1 {
  font-size: 12px;
  margin: 10px;
  border-radius: 4px;
}

但是我用了属性选择器后上面同样的代码就可以改写成以下：

<div class="demo1" fs12 ma10 br4>我是一个div</div>

这样一来是减少了css文件体积，但会增加html的体积，我想请问一下各位大佬，这种优化是否合适呢。

Answer 1

与其说增加了html的体积，不如说增加了js的体积。现在都是框架+组件，很少直接写html的，组件编译后都是js。
原子级样式的优点之一是复用性，理论上如果都复用原子级样式，一定规模后css减少的体积远要比js增加的体积多，但这点优化对项目性能的影响真的很小。
复用高意味着维护体验好，ui的改动往往要比js改动更频繁，另外皮肤类场景对复用性有很高的要求。

原子级样式另外一个优势是开发速度，它节省了频繁定义class以及切换文件的过程，开发体验好。

现在tailwind这种框架能够支持原子级样式组合，组织代码会非常舒服。

Answer 2

1. 这样做 html 体积增加了，于是 css 就能减小了么？为什么？你又没有 inline css
2. 带来了哪些好处？何谈优化？

Answer 3

减少css体积，适当增加html文档体积，对于一般项目来说，这是合理的
相对于庞大的css文件优化，给标签增加类名算是性价比很高的了
可以看下现在比较流行的 Tailwind css