SMACSS 为模块定义颜色答案

【问题标题】：SMACSS defining colours for modulesSMACSS 为模块定义颜色
【发布时间】：2015-10-01 20:06:13
【问题描述】：

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

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

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

或者，在位于 modules/testimonial.css 中的页脚内的实际组件的模块级别。

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

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

非常感谢。

【问题讨论】：

我在我的网站 wjbarber.com 上讨论了这个问题。查看我的“代码”页面上的“smacss”部分。我发现这种结构是最好的方法。希望对你有帮助
如果我做对了相信你可以/应该将颜色移动到不同的（scss）文件github.com/seeliang/sass-lib/tree/master/assets/scss/lib

标签： smacss

【解决方案1】：

如果我是你，我会使用 THEME 来完成此类任务。您定义 BASE、颜色、背景等，然后附加 THEME 类（theme.css）：

.l-footer {
  color: #FFFFFF;
}

更多关于THEME rules type的信息

【讨论】：

谢谢@Evgeniy。我想过这样做，但我的理解是当需要多种配色方案时使用主题层。例如区域颜色。对于一个单一配色方案的网站，我觉得这对 CSS 来说太过分了。仍然不确定我将如何满足不同颜色区域的多个主题。我猜他们会在 BODY 标签上挂一堂课。
如果我想处理 'testimonial' 样式，我应该转到 MODULES 文件夹中的 _testimonial.scss 文件，我不想在主题文件夹中为我的所有模块设置主题对应 -好像错了。
让您从新角度了解您的任务。你从 BASE 开始，在 body 上定义字体，默认颜色是黑色，和往常一样。接下来我们必须改变页面的外观和感觉，目前它的白色页脚，它可能是彩色页眉或差异背景，任何东西。使用主题的多色网站完成相同的任务，改变外观和感觉，但最大限度地使用它。

【解决方案2】：

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

查看更多信息：https://dev.acquia.com/blog/organize-your-styles-introduction-smacss

【讨论】：