Scalable and Modular Architecture for CSS

SMACSS (pronounced “smacks”) is more style guide than rigid framework.

At the very core of SMACSS is categorization.

There are five types of categories:

• Base
• Layout
• Module
• State
• Theme

Base

• A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page.

• Example Base Styles

body, form { margin: 0; padding: 0; }

a { color: #039; }

a:hover { color: #03F;
} Base styles include setting heading sizes, default link styles, default font styles, and body backgrounds. There should be no need to use !important in a Base style.

Layout

• Layout styles can also be divided into major and minor styles based on reuse. Major layout styles such as header and footer are traditionally styled using ID selectors but take the time to think about the elements that are common across all components of the page and use class selectors where appropriate.

• Layout declarations

#header, #article, #footer { width: 960px; margin: auto; }

#article { border: solid #CCC; border-width: 1px 0 0; }

• Generally, a Layout style only has a single selector: a single ID or class name. However, there are times when a Layout needs to respond to different factors. For example, you may have different layouts based on user preference. This layout preference would still be declared as a Layout style and used in combination with other Layout styles.

Module

• As briefly mentioned in the previous section, a Module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on. This is the meat of the page.

• Use child or descendant selectors with element selectors if the element selectors will and can be predictable. Using .module span is great if a span will predictably be used and styled the same way every time while within that module.

• Only include a selector that includes semantics. A span or div holds none. A heading has some. A class defined on an element has plenty.

State

• A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state.

• States are generally applied to the same element as a layout rule or applied to the same element as a base module class.

• There is plenty of similarity between a sub-module style and a state style. They both modify the existing look of an element. However, they differ in two key ways:

1. State styles can apply to layout and/or module styles; and
2. State styles indicate a JavaScript dependency.

• In a case where a state rule is made for a specific module, the state class name should include the module name in it. The state rule should also reside with the module rules and not with the rest of the global state rules.

• State rules for modules

.tab { background-color: purple; color: white; }

.is-tab-active { background-color: white; color: black; }

• Since the state will likely need to override the style of a more complex rule set, the use of !important is allowed.

Theme Rules

• 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.
• 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.