Classes in Obsidian are named with purpose.

Prefixes

Objects, components, and utilities are all prefixed (.o-, .c-, .u-). This leads to clear class names, class names we can search for an outline for QA. It also puts a hard line between objects and components.

Exceptions

Elements target HTML Elements directly (ie h2, ul). Elements are not prefixed because they extend responsive ability or serve as a opt-in default for an element vs opinionated styling. Classes in obsidian.forms-ui add specific opinionated styling that's common to projects.

Suffixes

Obsidian uses responsive suffixes @sm. Responsive targeting shouldn't be a modifier and falls in its own category. Obsidian defaults to a mobile first approach to CSS, meaning that classes without suffixes apply their styles to all screen sizes and ascend upward for styling per suffix.

@sm, @md, @lg are the given suffixes in Obsidian.

BEM

BEM is a naming convention that gives class names informative and clear meaning.

.block__element--modifier {
  /* Declarations */
}

Block Names

Blocks can be described as squares you can draw around a piece of UI or the root of a module (visual or conceptual). Most block names should be really simple, so avoid abbreviating or complicating. If two words are needed to describe a block separate them with a single hyphen -.

Blocks are the basis of a name. They can have both a modifier and a element attached (.Block__element--modifier) or have just have one (either a modifier .Block--modifier or an element .Block__element.

Utilities in Obsidian get a specific block name that describes their function. For example d abbreviating display or bkg abbreviating background.

Element Names

Elements are pieces of a block separated from a block by a double underscore __. .c-Modal__close would refer to a close link for a modal component, .o-Intrinsic__item would refer to the item in the intrinsic container.

Modifier Names

Modifiers add to the block or element in some way, hence modifying it. .o-Icon--sm would refer to a small icon object and .o-Column--3/12 would refer to a grid column that's 3 parts of 12.

Sources

• BEMIT
• More Transparent UI Code with Namespaces
• Dropbox CSS Styleguide

yarn add obsidian.css