(S)CSS架构:另类背景造型

Question

我正在使用“组件”的CSS方法，就像在SMACSS / ITCSS中一样，我仍然在为带有其他背景(黑暗)的样式部分而绞尽脑汁。

例如，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;
}

但不建议使用上下文样式；( b)将样式放在哪里？(哈里·罗伯茨辩称，在组件的档案中)

使用修饰符创建可选颜色组件

并更改HTML，例如：

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

但是，当您不知道哪些组件会在其中运行时，它就无法工作；( b)管理HTML的工作更多。

也许有更好的方法来处理这件事？

Answer 1

在基于组件的方法中，理想的方法是在您的样式指南中在背景和前景颜色之间进行映射。它应该是一对一的映射，应该适用于大多数元素。具有相同的CSS类。

接下来，为所有组件设置一个包装器容器。它的目的是将文字颜色传递给包装好的部件。因此，方法是为该部分设置一个背景颜色类，然后为运行的内容设置一个前景颜色类，应用于包装器，但在所有内容中运行样式。

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

注释中建议的库也是这样做的。主题对象有一种原色和第二种颜色。应用于该节的主组件和辅助组件作为上下文传递给各个组件。我建议只将它传递给组件的包装器。

定义类的一种比较聪明的方法是

t-wrapper-[colorName]

现在，这可以是通用的，colorName可以根据背景颜色作为包装器的上下文进入。

希望这能有所帮助。让我知道，如果这回答了你的需要，或你将需要支持片段为同样的。

Answer 2

实际上，您所要求的是根据节本身在节中设置组件的样式。不幸的是，这是不可能的CSS，如selector in CSS。但是，是 the value，它允许您根据其父级定义的规则对组件进行样式设计--非常适合组件驱动的CSS。

在我看来，进行交替背景样式的最佳方法是使用:nth-of-type伪类在<section>上。

​

section:nth-of-type(2n) {
  background: #464646;
  color: #fff;
}  

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

​

考虑到:nth-of-type利用数学对目标元素进行访问，您可以从字面上访问任意元素组合，这些元素是您想要的：

// Style every second element, starting with the first element
section:nth-of-type(2n - 1)

// Style every third element, starting with the second element (2, 5, 8, etc.)
section:nth-of-type(3n + 2)

这样，无论您是否使用组件驱动的方法，都不重要，因为您可以将样式化的直接从<section>本身替换出来。

不幸的是，从内部样式表(如<a>标记颜色)继承属性的元素仍然是基于内部样式表，而不是由父样式表定义的规则。

您可以通过使用上下文样式来解决这一问题：

​

section:nth-of-type(n) {
  background: #464646;
  color: #fff;
}

section:nth-of-type(n) a {
  color: #fff;
}

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

​

或者(最好是)使用inherit值告诉每个 <a>标记继承其父标记的颜色：

​

section {
  background: #464646;
  color: #fff;
}
a {
  color: inherit;
}

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

​

希望这能有所帮助！

Answer 3

您可以使用nth-child(odd)和nth-child(even)伪类在<section>上设置交替的背景样式。

​

body{
  margin:0;
}
section{  
  padding:20px;
}
section h2{
  margin:0;
}
section:nth-child(odd){
  background:#f5f7f6;
  color:#333;
}
section:nth-child(even){
  background: #113343;
  color: #fff;
}

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

​