CSS 架构、7-1 和样式组件

Question

除了 Styled 组件和通常的 CSS-in-JS 的许多伟大功能之外，当代码库增长并且更多开发人员加入时，事情会变得非常困惑。

一些关于 CSS 和 SCSS 的东西，比如 7-1 模式 (https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture)，如果设置正确并提供一些关于界面布局和组件如何工作的指南，事情会变得非常顺利和有条理，新人可以轻松上手到代码库并编写一个像样的 CSS，即使他们讨厌它或不知道它。

我喜欢 Styled 组件和 CSS-in-JS 的强大功能，所有这些都可能成为令人惊奇的东西……但我发现大规模维护起来非常繁重。

我感兴趣的是这两者的平衡，首先寻求这样的平衡有意义吗？对于样式组件的 7-1 模式，您有什么建议？

Answer 1

CSS-in-JS 将样式和行为更紧密地结合在一起，这就是重点。因此，让您的样式文件尽可能靠近您的组件是有意义的，这与 7-1 建议的相反。如果你想完全分离样式和组件，也许 CSS-in-JS 不是最好的方法。

对于共享变量，主题非常有用:https://www.styled-components.com/docs/advanced#theming .它还具有额外的好处，允许您拥有多个不同的主题并在它们之间轻松切换。