使用 BEM 和 vanilla CSS 时如何组织全局排版样式？

Question

我正在开发一个使用 BEM 和 vanilla CSS 的应用程序。设置可在其他块/元素之间重用的共享版式样式的最佳方法是什么？

我想到的几个选择：

选项A

使用带有修饰符的

text

块来混合到现有的块/元素中。例如：

.text {
  // base text styles
}

.text--small {
  font-size: 1rem;
}

.text--large {
  font-size: 1.5rem;
}

.text--grey {
  color: var(--grey);
}

这些可以像这样使用：

<div class="card"
  <p class="text text--small">

选项B

抛弃香草 CSS 并使用 SASS mixin 将这些样式混合到块/元素中：

.card {}

.card__text {
  @include text-sm;
}

选项C

不要尝试抽象任何这些样式，并接受跨块/元素的重复。

Answer 1

例如，如果您确定您的卡片将始终具有相同的设计，则永远不会改变选择第二个选项的最佳决定。

使用第一个选项，您可以根据需要灵活地更改卡片的样式，而无需重新调整样式。

永远不要选择第三种选择，随着项目的发展，它会让你处于脆弱的境地。