公共样式vs局部样式

公共样式的优点是代码复用，避免重复，同时可以修改时只需修改一个地方应用到所有。
缺点是很多时候一个公共class里面混杂了七八个以上的属性，但实际场景只需要其中的一部分属性，这种情况就不好处理。
比如定义了一个:

<div class="fm-title">...</div>
<style>
.fm-title {
   font-size:15px;
   font-weight: bold;
   padding: 10px;
   overflow: hidden;
   text-overflow:ellipsis;
   text-align: center
}
</style>

可能一两个场景能复用这个fm-title。但如果遇到一个场景需要这个标题class，但又要边距为20px并且右对齐（这里只是举例，这种场景很常见），此时要想用这class，但又不能去修改原本样式（因为其他地方引用了），没办法就得再加样式覆盖：

<div class="fm-title">...</div>
<style>
.fm-title{
   padding: 20px;
   text-align: right
}
</style>

这就导致还是有重复，代码冗余。

---

因此，前端主流的做法是缩小公共样式的粒度，每个公共class只做一件事，只包含相关的1个或几个样式属性，即所谓“原子化样式”，如：
https://blog.csdn.net/qq_34419312/article/details/143518513
https://juejin.cn/post/6989475614809915400
https://blog.csdn.net/qq_29493173/article/details/146370319

这样的话，上面的问题就可以这样解决：
基础公共样式:

.font15 {
   font-size:15px;
}
.bold{
   font-weight: bold;
}
.pd-10{
   padding: 10px;
}
.ellipsis{
   overflow: hidden;
   text-overflow:ellipsis;
}
.t-center{
   text-align: center
}

<div class="bold font15 pd-10 ellipsis t-center">...</div>

此时如需要20px并且右对齐，那就直接用，无需再写样式：

<div class="bold font15 pd-20 ellipsis t-right">...</div>

这种做法代码可复用，也比较灵活，能大量减少css的代码量，便于阅读和修改。
不过缺点就是有一定学习成本，需要开发人员熟悉基础公共样式class有哪些；同时也会使html相对更复杂，也不宜过度使用。

---

所以感觉最好的办法还是两者结合一下，对比较固定的属性写局部，可能发生变化的使用基础样式，同时对于通用性较高的部分引用公共样式。
比如上面的例子，考虑对于标题来说，font和bold、ellipsis都是比较固定的不会变，那就这样实现：

<div class="fm-title pd-10 t-center">...</div>
<style>
.fm-title {
   font-size:15px;
   font-weight: bold;
   overflow: hidden;
   text-overflow:ellipsis;
}
</style>

需要20px并且右对齐，那就：

<div class="fm-title pd-20 t-right">...</div>

不过，这种做法，对于哪些属性是可以固定的，也不是很好判断。