# Naming conventions

Our framework relies on structured, well described class names that support style encapsulation. Our naming conventions convey a consistent way of writing and better communicates the relationship between our classnames.

## 1. Utilities

Structural helper classes. Utilities can be applied directly to any element within a component and focus on doing one thing only.

**u-UtilityName**

Utilities are prefixed with the 'u-' namespace to distinguish themselfs from component styles.

```html
<p class="u-SpacingMb0">
  This paragraph is stripped from it's bottom margin.
</p>
```

## 2. Components

These are styles that are applied to our components. We distinguish Common Components from Layout Components.

**itp-ComponentName**

To avoid the potential for collisions between libraries and your common components we prefix our components with 'itp-'. This makes it clear, when reading the HTML, which components are part of your library.

A component must be written in pascal case.

```html
<div class="itp-MyComponent">
  ...
</div>
```

**l-ComponentName**

Layout components are global cosmetic-free design patterns. They help us design certain chunks of UI by providing structure. Layout components are prefixed with 'l-' to distinguish them from Common Components.

A good example of a layout component is the Grid.

```html
<div class="l-Grid">
  <div class="l-Grid__item">
    ...
  </div>
</div>
```

**itp-ComponentName--modifierName**

A component modifier is a class that modifies the presentation of the base component in some form. Modifier names must be written in camel case and be separated from the component name by two hyphens. The class should be included in the HTML in addition to the base component class.

```html
<button class="itp-Button itp-Button--primary" type="button"></button>
```

**itp-ComponentName__elementName**

A component element represents a descendent of the component. It's responsible for applying presentation directly to the descendent. Element names must be written in camel case.

```HTML
<article class="itp-Card">
  <header class="itp-Card__header">
    ...
  </header>
  <div class="itp-Card__body">
    ...
  </div>
</article>
```

**ComponentName.isStateOfComponent**

Use a state name to reflect changes to a component's state. The state name must be camel case. **Important:** Never style these classes directly; they should always be used as an adjoining class.

```HTML
<div class="itp-Modal isVisible" id="myModal" tabindex="-1" role="dialog">
  ...
</div>
```

## 3. Custom Properties

Custom theme and component properties must be written in camel case.

```CSS
/*
  Default grid properties
*/
:root {
  --gridMaxWidth:      var(--bp5);
  --gridGutter:         1rem;
}
```