SMACSS defining colours for modules

Question

In SMACSS where should I be defining colours?

I have defined my base font in the base\base.css for the general content, but my footer requires a different coloured font. Should I be declaring this in my layout/footer.css so it can cascade down to the components, like so:

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

or, at the module level of the actual component which resides inside the footer in modules/testimonial.css.

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

Is there any documentation or links that discuss this?

Thanks so much.

Answer 1

If i were you i would use THEME for such tasks. You define BASE, colors, background and so on, then attach THEME classes (theme.css):

.l-footer {
  color: #FFFFFF;
}

More info about THEME rules type

Answer 2

Theme Rules - are things like your page background, typography, colors, etc. This is another area I often pass on, except for when I need to override theme elements for different pages. An example of this would be maybe a content-type that has a different style in order to set it apart from the rest of the site. So if your page has a white background - body {background: #fff;} but on blog pages it should be gray, I’d use a theme rule to overwrite my base rule - .node-type-blog {background: #ccc;}

See more at: https://dev.acquia.com/blog/organize-your-styles-introduction-smacss