Theme Rules

http://smacss.com/book/type-theme

Theme Rules

Theme Rules aren't as often used within a project and because of that, they aren't included as part of the core types. Some projects may have a need for them, though, as we did when working on Yahoo! Mail.

Themes

It is probably self-evident but a theme defines colours and images that give your application or site its look and feel. Separating the theme out into its own set of styles allows for those styles to be easily redefined for alternate themes.

Themes can affect any of the primary types. It could override base styles like default link colours. It could change module elements such as chrome colours and borders. It could affect layout with different arrangements. It could also alter how states look.

Let’s say you have a dialog module that needs to have a border colour of blue, the border itself would be initially defined in the module and then the theme defines the colour:

Module Theming

// in module-name.css
.mod {
    border: 1px solid;
}

// in theme.css
.mod {
    border-color: blue;
}

Themes could have class names that clearly indicate what styles are part of the theme and what aren’t. Just having a separate theme file should hopefully be enough.

At Yahoo! Mail, to help with maintaining consistency across all of our theme files—we have over 50—we use a Mustache template for our CSS that allows us to specify a number of colour values, a background image, and create a final CSS file for production.

Typography

Last but not least, there are font rules. Similar to themes, there are times when you need to redefine the fonts that are being used on a wholesale basis, such as with internationalization. Locales such as China and Korea have complex ideograms that are difficult to read at smaller font sizes. As a result, we create separate font files for each locale that redefine the font size for those components.

Font rules will normally affect base, module and state styles. Font styles won’t normally be specified at the layout level as layouts are intended for positioning and placement, not for stylistic changes like fonts and colours.

Like theme files, there may not be need to define actual font classes (like f-large). Your site should only have 3 to 6 different font-sizes. If you have more than 6 font sizes declared in your project, your users will not likely notice and you are making the site harder to maintain.