SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS. It is pronounced “smacks” and introduced by Jonathan Snook.

Why SMACSS?

SMACSS is a design guideline, and not a rigid framework. SMACSS is an attempt to document a consistent approach to site development when using CSS. It strives to achieve two main goals:

• Increase the semantic value of a section of html and content
• Decrease the expectation of a specific html structure

More on Categorization

The purpose of this categorization is less code repetition, a more consistent experience, and easier maintenance. Under SMACSS there are 5 general categories of css rules.

• Base - Your defaults (html, body, h1, ul, etc)
• Layout - Divides the page into major sections
• Module - Reusable modular components of a design
• State - Describe how things look when in a particular state (hidden or expanded, active/inactive)
• Theme - Defines things like a color scheme or typographic treatment across a site

Instead of mixing CSS across all these categories, we can apply some guidelines across these categories and simplify our CSS.

Naming Convention

Jonathan suggests adding prefixes for the selectors by following a convention:

• Base - Nothing needed
• Layout - l- or layout- prefixes
• Module - Modules just use module name (eg: .tooltip) instead of trying to prefix each, however related modules receive a consistent prefix to help organize them
• State - is- prefix as in is-active or is-hidden
• Theme - Defines things like a color scheme or typographic treatment across a site

Let's expand on this a little bit more.

Base

Base rules are applied for elements. Not ids or classes.

h1 {
  color: red;
}

body {
  margin: 0 auto;
}

CSS resets are an example of base styles. CSS Reset and Normalize.css are example libararies using base element styling to override user agent (browser) in-built style.

Layout

There are two types of layout components:

• Major - Like a header block containing a logo and a title
• Minor - Like a logo that is inside a header tag.

SMACSS layout rules will only apply for major components. Minor components fall under module rules.

Generally a layout style will have a single selector (either an ID or class). Additionally there could be a style set to allow the layout style to respond to different factors.

#Banner {
  width: 100%;
}
.l-top #Banner {
  width: 800px;
}

Module

Modules should be designed so they can exist on their own, which gives them greater flexibility in being combined and moved around to different parts of the design without breaking the layout. With modules we do want to avoid IDs and element selectors. More reuse means classes.

.box {
  width: 250px;
}
.box p {
  padding: 20px;
}
#Banner .box {
  width: 100px;
}

State

A state style is one that augments or overrides other styles under given conditions. For example an accordion with collapsed and expanded states. These are typically applied to the same element, should be built to stand alone, and are usually developed on a single class selector.

.box {
  width: 250px;
}
.box.is-selected {
  border: 1px solid red;
}

State changes are represented in one of three ways:

• Class name — The change happens by adding or removing a class, usually with JavaScript
• Pseudo-class — The change happens to elements that are descendants or siblings of the element with the pseudo-class
• Media query — The change happens under defined criteria, such as different viewport sizes.

Conclusion

SMACSS helps us write more flexible and maintainable CSS.