html - (S)CSS 架构 : alternative backgrounds styling

Question

我在 SMACSS/ITCSS 中使用 CSS 的“组件”方法，我仍然对具有替代(深色)背景的样式部分摸不着头脑。

例如Stripe 有常规(白底黑字)和替代(黑底白字)部分。

据我所知，有一些假设 HTML 的选项:

<section class="dark">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#" class="btn">Action</a>
</section>

部分上下文中的样式，例如:

.dark h2, .dark p, .dark btn {
  color: white;
}

但是 a) 不推荐使用上下文样式； b) 样式放在哪里？ (Harry Roberts 在组件的文件中争辩说)

使用修饰符创建不同颜色的组件

并更改 HTML，例如:

.title--alt-color {color: white;}
.text--alt-color {color: white; }
... 

但是 a) 当您不知道哪些组件将放入其中时，它不起作用； b) 管理 HTML 的更多工作。

也许有更好的方法来处理这个问题？

Answer 1

在基于组件的方法中，实现此目的的理想方法是在样式指南中准备好背景色和前景色之间的映射。它应该是适用于大多数元素的一对一映射。为其定义 CSS 类。

接下来为所有组件创建一个包装器容器。它的目的是将文本颜色赋予其包装的组件。因此，该方法是为该部分设置一个背景颜色类，然后为内容设置一个前景色类，该类适用于包装器，但在所有内容中运行样式。

注意:特定的颜色覆盖始终可以驻留在您的组件文件中，例如在某些文本上使用突出显示等。

评论中建议的库做完全相同的事情。主题对象中有主要颜色和次要颜色。主要应用于该部分，次要作为上下文传递给各个组件。我建议只将它传递给组件的包装器。

定义类的一种有点聪明的方法是

t-wrapper-[colorName]

现在这可以是通用的，并且 colorName 可以作为基于背景颜色的包装器的上下文出现

希望这对您有所帮助。让我知道这是否能满足您的需求，或者您需要相应的支持片段。