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

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

.l-footer {
  color: #FFFFFF;
}

有关THEME rules type

的更多信息

Answer 2

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

详见：https://dev.acquia.com/blog/organize-your-styles-introduction-smacss

SMACSS定义模块的颜色

2 个答案: