Selector Types - HelpfulHuman/HelpfulUI GitHub Wiki

The following section helps explain the various rules for naming classes and how they are used to create more readable mark up.

Components

Components are the building blocks of your user interface. They should always be the top level class and act as a namespace for their dependent parts, modifiers and states.

<a href="#" class="button">
  Example Button Component
</a>

Parts

Parts are the pieces that make up components. The part's class consists of its name prefixed by the component's name and 2 underscores: .component__part. This helps namespace smaller pieces in a clear way to help reduce confusion and risk of accidental style inheritance.

<div class="panel">
  <header class="panel__header">Example</header>
  <section class="panel__body">Lorem ipsum...</section>
</div>

States

States are classes that change a component's behavior only while they're applied. States are prefixed with is- and should always be used as compound selectors. An example: .component.is-state

<div class="tabs">
  <div class="tabs__tab is-active">Tab 1</div>
  <div class="tabs__tab">Tab 2</div>
  <div class="tabs__tab">Tab 3</div>
</div>

Modifiers

Modifiers are classes that extend the behavior of the component or part that they are applied to. They are prefixed with + and can either be "global utilities", like +clearfix, or component specific "options", like button +blue. Component specific options should always be defined as compound classes.

<div class="thumbnails +dark +clearfix">
  ...
</div>

Please Note

In order to use the + character in a CSS class name, you will need to escape it using the \ character. If you are you using stylus, then you will need to escape the escape character as well. Examples: .\+foo in vanilla CSS and .\\+foo in Stylus.

Contexts

Contexts are top-level selectors that have a cascading effect on all of their child components. It is highly recommended to use components and modifiers over contexts in most cases, however, sometimes small adjustments need to be made in order for a set of components to cooperate. Context classes are denoted using the as- prefix. You should never have more than one context applied to an element at any given time.

<body class="as-about-page">
  ...
</body>