Question

我在SMACSS / ITCSS中使用CSS的“组件”方法，我仍然在考虑使用替代（深色）背景设置部分。

e.g。条纹有规则（白色的深色文本）和替代（黑暗的白色文本）部分。

据我了解，有假设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，there is no parent selector in CSS。但是，是 inherit value，它允许您根据其父级定义的规则设置组件样式 - 非常适合组件驱动的CSS。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

考虑到: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>标记颜色）继承属性的元素，而不是由其父级定义的规则。

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者（并且最好）利用inherit值告诉每个 <a>标记从其父级继承其颜色：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

Answer 2

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

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

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

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

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

t-wrapper-[colorName]

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

希望这会有所帮助。如果这回答了您的需求，或者您需要支持相同的代码段，请告诉我。

Answer 3

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

（S）CSS架构：替代背景造型

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

使用修饰符

3 个答案: