brAND uses BEM (Block, Element, Modifier) because it allows us to be modular and makes it easier to understand when you understand BEM.
It also drastically reduces specifity so you can easily override existing elements' style.

## What is BEM

BEM is a naming convention for your CSS that makes modules and their related elements easy to identify and modifications easy to spot.

[Read more about BEM](http://getbem.com/) here.

### Blocks

You can declare a module with a simple, block class.

```html
<div class="module-name"></div>
```

### Elements

Elements that are related to that module are prefix with the module name followed by two underscores.

```html
<div class="module-name">
  <div class="module-name__element"></div>
</div>
```

Multiple words are hyphenated...

```html
<div class="module-name">
  <div class="module-name__element-name"></div>
</div>
```


### Modifiers

If an element or block's styling is largely the same with one, small modification, then you should add a modifier class
along with its element class so that the element classes syle remains.

```html
<div class="module-name">
  <div class="module-name__element"></div>
  <div class="module-name__element module-name__element--modification"></div>
  <div class="module-name__element module-name__element--modification-two"></div>
</div>
```

The SASS for the above code would look like this...

```scss
.module-name {
  padding: 20px;
  border-radius: 5px;
  background-color: #898989;
  
  &__element {
    background-color: #FFFFFF;
    padding: 5px;
    border: 1px solid #000000;
    
    &--modification {
      background-color: #1EA014;
    }
    
    &--modification-two {
      background-color: #A050FF;
      border-color: #2897FF;
    }
  }
}
```

As you can see above, it's easy to see what elements relate to the module (in this case called 'module-name').

You can create simple modifications on the styling of the element while maintaining the bulk of its original styling by
adding modifiers. modifier classes should remain as small as possible and often (but not necessarily all the time) override
existing styles. Modifiers can go anywhere and are not restriced to 'Elements'. For example...

```html
<div class="module-name module-name--modifier">
  <div class="module-name__element"></div>
</div>
```

```scss
.module-name {
  padding: 20px;
  border-radius: 5px;
  background-color: #898989;
  
  &--modifier {
    border-radius: 0;  
  }
}
```

git@github.com:fakesamgregory/brAND.wiki.git