Academy of Natural Sciences

Naming Conventions

General Rules

  • Use dashes rather than camelCase or PascalCase
  • When possible, block level class names should reflect the name of the element given during the roadmapping phase.
  • Element names should be succinct
  • Class names should be written as [ITCSS_PREFIX]-[BLOCK_NAME]__[ELEMENT_NAME]--[MODIFIER_NAME].

ITCSS Naming Conventions

ITCSS file organization helps to leverage and control cascade features while avoiding the use of !important. Prefixing class names helps to identify where files are located and the level of importance in the class name. See assets/src/scss/app.scss for further clarification.

Class names should be prefixed with an ITCSS identifier, which is determined by file structure:

  • o-: Objects
  • c-: Components
  • u-: Utilities

There are additional prefixes in use that are not relevant to ITCSS structure, but help maintain decriptive naming:

  • f-: Font style

BEM Naming Conventions

Component wrapper elements are given class names according to their Component name. Child element class names then use the component name as a base, followed by a general description of the element. These are joined with two underscores (__)

Example, where a component is named “Some Component”:

<section class="c-some-component">
  ...
  <h2 class="some-component__title ...">
  <ul class="some-component__items">
    <li class="some-component__item">
    ...

If an element has variations, the variation is appended to the class name with two hyphens (--).

Example, where a component is named “Some Button”:

<button class="some-button some-button--alert">

Javascript

Javascript classes are prepened with js-. These class names should never be used for style, and only act as selectors for javascript actions.

Class names should be relevant to javascript action, such as js-open-modal.

References