简介/背景：CSS组件
对于一个相对较大的网站，我们正在与SASS合作，并尝试管理组件中的CSS。组件的基本思想是，组件在任何地方都应该看起来相同，而与DOM中更远的容器元素无关。
因此，我们要避免这样的事情（SASS）：
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}相反，如果我们希望用户图片在首页上看起来有所不同，则它必须是不同的组件。例如，具有SASS继承或具有mixin：
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}然后，我们需要调整首页上的html，以便它使用不同版本的用户图片。
到目前为止，一切都很好。我将以上内容发布为一个示例，以说明我对CSS组件的当前了解。
问题：修饰符类-好的做法？
现在我们遇到了一个问题：某些页面的背景为深色（黑色），因此文本，边框和内容必须为白色。
这在某种程度上超出了组件：默认情况下，同一组件应具有深色文本，但是如果它位于具有深色背景的容器中，则应具有白色文本。
因此，我们有了一个很棒的主意：
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}因此，我们有一个外部“修饰符”或“上下文”类white-on-black，用于修改内部元素的显示方式。
其动机是组件本身不负责DOM中更远的容器元素的背景。
这可行。唯一的问题是深色背景容器中是否有白色背景容器。除此之外，它还可以。
问题是，这在结构上是否是一种好的做法，其背景是试图使组件彼此独立。
另一种选择是具有不同的组件，例如my-component-on-dark-bg，它从my-component文本和边框继承并具有不同的颜色。但是在这里，产生组件html的（例如PHP）代码需要了解外部，即是否使用了深色bg。假定呈现组件的PHP代码与呈现容器的PHP代码是分开的。如上所述，它仍然是可管理的，但可以作为带有修饰符类的模式的参数。
笔记
实际上，我们为CSS类添加了特定于项目的前缀。为了简单起见，我只是在这里省略了它，因为我从事的项目与谁无关：)。