CSS的复用代码，是多添加点类好？还是增加点代码量好？

蟹妖~

本来工程化就是在代码效率和开发效率中找一个平衡点。

原子类的风格我不太喜欢，这基本上就和inline style差不多了。

我觉得在题主的项目中，这点代码差异带来的性能差异可以忽略不计，所以还是重点考虑选一个看着顺眼的书写方式吧。

题主的主要问题是项目太小，如果CSS代码上几千行规模，自然就知道less有啥用了...

在 bootstrap 中经常可以看到这样的代码：

<button class="btn btn-default" type="submit">Button</button>
<div class="alert alert-success" role="alert">...</div>

人家也是为了复用代码，所以提供了很多模块化的代码封装，比如 btn/alert/labels/panel 等等，这种封装是值得提倡的。

就题主提供的代码来看，基本都是对布局和主题（包括颜色、边框宽度、字体大小等）的微调，有了这些类，在写布局的时候可以在 html 中做很多细节调整工作。这种做法在几年前，我觉得挺好，原因是 PC 为主流端，设计上章法要少很多，设计师天马星空得多。

而现在以 Mobile 为主流趋势，设计上也开始围绕无线做了很多规范，包括

• 布局格式，一行一列、一行两列、一行三列，结构并不复杂；
• 字体规范，不同端使用哪些具体的字体，不同位置使用哪些不同的字体大小，变化其实也并不多
• 色彩规范，为了保持简洁、统一，无线上用到的颜色也并不多

等等，以上只是基础规范，更多的规范是对模块的规范，比如顶部 bar 可以放哪些东西，放在什么部位；底部 bar 可以分几块，每个块中文字和图标的大小和位置是如何；关注模块长什么样子，有几种形态，尺寸分别是多少等等，还有其他很多方面。可以看一看手机淘宝，你会发现大多数页面打开风格都差不多的，甚至很多模块都是差不多的。

在这种设计环境下，对前端来说 .f12/.fr 这样的布局微调 class 类并没有太多的用武之地，而且现在在无线上的布局以 flex 为主流，其实也不太用得上这些东西。

当然，我也不否定这种习惯，其实写代码，怎么开心怎么来，这些都属于细节问题，并不影响团队协作。