We try to write modular and scalable CSS for Forever, so we use <%= link_to "SMACSS", "https://smacss.com/" %> as a model for how to logically organize and structure our CSS.

Modules == Block == Object

The majority of the CSS that we write should be modules, in BEM these are known as blocks and mean the same thing. Basically these are visual components on the screen that serve a discreet purpose.

Modules should preferably be unique single words declarations, or underscore separated for multi-word declaration. DO NOT USE HYPHENS FOR MODULE NAMES.

.object {}
.btn {}
.avatar {}
.photo_item {}

<%= link_to "Learn more about SMACSS modules.", "https://smacss.com/book/type-module" %>

Sub-modules & Modifiers

Modules dependent on other modules (or elements as known in BEM) are declared via a hypen between the module and sub-module name. Unlink BEM, modifiers may be declared in the same fashion as sub-modules. Most complex modifiers are actually states, and are handled differently. Use your best judgement about whether your CSS is a modifier or a state.

Hypens denote a relationship to a sub-module.

.object-sub_object {}
.btn-primary {}
.avatar-account_manager {}
.photo_item-img-highlighted {}

Base, Layout & Theme

CSS that is more fundamental than a module such as base or layout should be prefixed with .b- or .l- accordingly. Similarly theme's should be prefixed with .t-.

.b-base_name {}
.l-layout_name {}
.t-theme_name {}

<%= link_to "Learn more about SMACSS base, layout & theme.", "https://smacss.com/book/type-base" %>

States

States are distinct from modifiers in that they communicate a relationship to JavaScript manipulation. Any class that is set or toggled via JS should have a separate state selector related to, but distinct from the dependent module selector.

.object-is-toggled {}
.photo_item-is-selected {}

<%= link_to "Learn more about SMACSS states.", "https://smacss.com/book/type-state" %>