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.
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>
Every HTML class is prefixed with a namespace according to the category it belongs.
c-for components (
e.g. c-modal , c-modal__title)
HTML classes that have impact only in specific screen sizes have a
1 <p class="u-text-center u-text-right@sm">Center aligned in mobile, right aligned from tablet and over</p>
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.