定义模块颜色的SMACSS

Question

在SMACSS中，我应该在哪里定义颜色？

我已经在base\base.css中为一般内容定义了基本字体，但是我的页脚需要不同颜色的字体。我是否应该在我的layout/footer.css中声明这一点，这样它就可以级联到组件中，如下所示：

.l-footer {
  background: #333333;
  margin: auto;
  color: #FFFFFF; /* Here ? */
}

或者，在驻留在modules/testimonial.css.页脚内的实际组件的模块级别上

.testimonial {
  color: #FFFFFF; /* Or here ? */
}

是否有任何文件或链接来讨论这个问题？

非常感谢。

Answer 1

如果我是您，我将使用主题来执行这些任务。定义基色、颜色、背景等，然后附加主题类(theme.css)：

.l-footer {
  color: #FFFFFF;
}

关于主题规则类型的更多信息

Answer 2

主题规则-是像你的页面背景，排版，颜色等。这是我经常传递的另一个领域，除了当我需要覆盖不同页面的主题元素。这方面的一个例子可能是具有不同风格的内容类型，以便将其与站点的其他部分区分开来。因此，如果您的页面有一个白色的背景- body {background: #fff;}，但是在博客页面上它应该是灰色的，我会使用主题规则来覆盖我的基本规则.node-type-blog {background: #ccc;}。

请参阅更多信息：https://dev.acquia.com/blog/organize-your-styles-introduction-smacss