基于集中式或基于组件的样式结构？

Question

我有两个元素：“选择状态”和“选择日期”，我使用BEM表示法和Vue.js。

使用BEM标记在集中位置设置这两个元素的样式是常见的做法，还是更有意义的是创建两个组件并分别为每个组件设置样式？

我的意思是，如果我要创建两个组件并分别为每个组件设置样式，那么这两个相似元素之间的每个相等样式都会创建两次。据此：摆脱基于组件的样式会更好，并且在集中位置对元素进行样式会更好吗？

Answer 1

基于组件的样式是我更喜欢的解决方案。 BEM允许甚至建议组件之间重复。 BEM向您保证，当您修改一个组件时，不会破坏另一个组件。这种隔离带来了代价：重复和标准化程度降低。它还具有一些好处，例如，更少的复杂性。 因此，这里的重复通常是最简单正确的答案。

如果您确实愿意，可以避免重复。您将必须找到在这两个组件之间相同的子块。例如，您可以创建一个通用的select-input块。它将能够处理日期，状态或其他任何方面的特殊性。由于以下三个原因，该解决方案非常有用：

• 它允许缩放。现在，也许您只有状态和日期。但是为将来做好准备很高兴，您将轻松处理更多类型。
• 分隔样式和功能。在BEM中，您应该具有定义外观的名称，而不是定义外观的名称。它不是contact-form-submit-button（它的作用），而是button button--primary（它的样子）。因此，如果您对另一种表单具有完全相同的样式，则可以重复使用它！因此，例如，您将获得select-date而不是select-input select-input--small。
• 它分离逻辑组件和样式组件。两个Vue组件可以使用相同的块样式，并且可能包含不同的元素。我仍然发现这种全局样式是基于组件的样式，因为每个块都彼此独立。