Glossary

Module (m-module)

:contains :components
:extended_by :submodules
:modified_by :modifiers

Modules are the base of modular CSS. They should be as generic as possible and provide the lowest common denominator of a set of submodules.

In contrast to submodules they are also referred to as "root modules".

Submodule (m-module_submodule)

:inherits_from :module

Submodules are the variations of modules used for different purposes and different contexts.

Components (m-module--component)

:belongs_to :module || :submodule

Modifier (&.modifier)

:defined_on :modules || :submodules

Modifiers are little classes defined on modules that modify small aspects of the module. Examples are .left, .centered, .first etc. They should only ever be defined in connection with a module. Meaning they need to be defind with the ampersand &.modifier and can't just be nested within a module.

Layout class (l-container)

Defines the width and/or positioning of an element.

State (&.is-state)

States are a special type of modifier that define "temporary" variations of a module. This means that the state can either change via Javascript or between requests. Other variations (based on context, etc.) are not states and should be defined as submodules or modifiers. Media querys and pseudo classes are also a type of state.