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.

I discuss this on my website wjbarber.com. Check out the 'smacss' section on my 'code' page. I have found this structure to be the best method. Hope it helps — JordanBarber, Apr 06 '16 at 14:00
If i got it right believe you could / should move colour to different (scss) file https://github.com/seeliang/sass-lib/tree/master/assets/scss/lib — Seeliang, Sep 29 '17 at 22:44

score 0 · Answer 1 · answered Jul 22 '15 at 07:12

0

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

answered Jul 22 '15 at 07:12

Evgeniy

2,915
3
21
35

Thanks @Evgeniy. I thought about doing it like that, but my understanding is that the THEME layer is used when multiple colour-schemes are required. For example regional colours. For a single colour-schemed site, I feel this fragments the CSS too much. Still not sure how I would cater for multiple themes for different coloured regions. I guess they would hang off a class on the BODY tag. – gjok Jul 23 '15 at 11:22
If I want to work on the 'testimonial' styling I should go to my _testimonial.scss file in my MODULES folder, I would not want to have theme counterarts for all my modules in a THEME folder - seems wrong. – gjok Jul 23 '15 at 11:25
lets get a new angle on you task. You start with BASE, define font on body, default color is black, as usual. Next we have to change look and feel of your page, currently its white colored footer, it may be colored header or diff background, anything. Multi-colored sites using THEME for same task, change look and feel, but use it to the max. – Evgeniy Jul 24 '15 at 10:11

score 0 · Answer 2 · answered Mar 21 '16 at 15:12

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

SMACSS defining colours for modules

2 Answers2