BEM Class Names
===

Class naming is a suprisingly important aspect of maintaining a front end code base. There are various methodologies, but we're using a BEM-like structure for our CSS. BEM structures are based on a root **block** class, which can have **modifier** states and descendant **element** classes. 

You can (and should!) [**read more about BEM**](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). Here, a simple example should suffice:

```scss
.Block {
  position: relative;
}
.Block_modifier {
  color: red;
}
.Block-child {
  position: relative;
}
.Block-child-deep {
  position: absolute;
  top: 0;
}
```

BEM creates a natural scope for your CSS selectors, and adds a whole lot of semantic meaning to the resulting class structures.

### BEM Conventions

In general, your BEM should follow these conventions:

- Block classes are `.CamelCased`
- Modifier classes are `&_underscored`, and generally come before descendant classes
- Descendant classes are `&-dash-separated`

#### BEM for UI Elements

Each UI element can have a `style.scss` partial. This partial can only have **one block** at the root of it's stylesheet. (This is very similar to React's limitation that a components render method may only return a single top-level JSX tag.)

#### Writing BEM in Sass

Since the UI precompiles Sass, it's worth noting that BEM structures can be further simplified using the ampersand selector:

```scss
.SomeElement { // block selector
  position: relative;
  &_colorful { // modifier selector
    color: red;
  }
  &-descendant { // element selector
    position: absolute;
    top: 0;
  }
}
```