vue抽离组件要不要使用公共样式？

Question

如我定义了一个common.scss 里面有margin 和padding font-size等属性。很多地方通用。我抽离的组件要不要也是用这里的样式。还是要在组件自己的style重新再写一遍呢？利弊又是什么。请教一下大家。

Answer 1

我现在建议使用 TailwindCSS 风格的原子样式，比如：.ml-4 { margin-left:1rem; }。组件里面尽量只包含组件内部的样式，其它样式，比如边距、尺寸、颜色等，在具体使用的时候用原子样式定义。这样可以最大限度提升开发效率。

Answer 2

抽离的话，代码量就没那么多，而且改起来也方便，但组件的耦合性会变高。

不抽离的话，组件独立性就很高，不好的就是代码量，特别是重复的地方会比较多。

不过既然是组件，肯定不用抽离吧。毕竟组件就是拿来即用，不使用的话，直接不引入就可以。

Answer 3

1. 如果是你自己封装的组件库（比如你自己写了一个element组件库），可以使用，这样方便在公共样式中修改后，整体组件的样式会发生同意修改，而不用跑去每个组件修改样式，比如实现一键换肤，换颜色等功能。
2. 如果是公司项目，与他人合作的项目，不要使用公共样式，因为公共样式很可能被人修改，且修改的人不知道你引用了，导致你的组件出现样式问题。