HTML class naming

iotaCSS has adopted some of the best naming techniques to make sure that every HTML class is readable and easily discoverable into your codebase. The main techniques it uses are the BEM methodology, namespacing and breakpoints suffixes.

BEM

Every object and component HTML class is written according to the ΒΕΜ methodology.

1
2
3
4
5 <nav class="c-navigation">
  <a href="#" class="c-navigation__item">Item</a>
  <a href="#" class="c-navigation__item">Item</a>
  <a href="#" class="c-navigation__item c-navigation__item--primary">Item</a>
</nav>

Namespaces

Every HTML class is prefixed with a namespace according to the category it belongs.

c- for components (e.g. c-modal , c-modal__title)
u- for utilities
o- for objects

Breakpoint Suffixes

HTML classes that have impact only in specific screen sizes have a @breakPointName suffix.

1 <p class="u-text-center u-text-right@sm">Center aligned in mobile, right aligned from tablet and over</p>

Tip

You should always name your HTML classes unrelated to content and try to keep more design specific naming. E.g. o-grid, o-media, o-container, o-text, c-title, c-body.