BEM cheatsheet

gistfile1.txt

# Explain that BEM thing to me again..?

## Block

The **root of your CSS component**. eg: `.c-header` or `.c-flash`. (I'm namespacing all my classes with a `c-` to denote they're components, but that's optional. Namespace away to your own preference. Or don't. Whatever.)

## Element

Classes that are used **inside the component block**, and are **instrumental to the structure** - eg: the links inside a header: `.c-header__link`, or a dismiss button inside a flash notice: `.c-flash__dismiss`.

## Modifier

Classes that are used to **optionally theme**, or **create alternative implementations** of the basic block component. eg: `c-header--dark`, `c-flash--urgent`

# The "but what about"s

* **Modifiers** are only used on the same element as the **Block** class. They should not be used on their own. If they are, or can be, they're probably not a modifier, and should be refactored into their own component. eg: `<i class='c-flash c-flash--theme'>...</i>`
* Using single dashes is totes acceptable, and makes things readable - eg: `.c-magic-thing`
* Using multiple dashes/underscores in a single class name is a code smell. If you find yourself having to do something like `c-navigation__links__user-login`, it's probably time to break that shit up into multiple components.
* Updating elements with a modifier would be like this: `.c-flash--themed .c-flash__dismiss {...}`