sparkbox/sparkbox-website — pull request #41 by ethanmuller (2013-11-15 23:16:24+00:00)
Title: Refactor to new conventions

This refactors our current classnames to fit with new conventions that we've decided on. This will also *pummel* any unmerged local branches you have. Merge with caution!

I'm still gonna type up more formal conventions, but here are the basics:

**Modules** are *hyphen-separated*:
```css
.even-grid {}
```

**Subcomponents** of modules are separated with *double--hyphens*:
```css
.even-grid--item {}
```

**Modifiers** are *underscore_separated*:
```css
.even-grid--item_has-image {}
/* or */
.even-grid--item_is-active {}
```
**Only be as verbose as you need to be.** Don't allude to DOM structure when you don't need to:
```css
/* don't do */
.even-grid--contents--image {}

/* do */
.even-grid--image {}
```

---

One hole that these conventions might not account for is variants on modules (Snook calls them submodules). For example, if we needed a variant of `even-grid` to be styled to be extra wide. I'm not sure these conventions leave room for this.

Maybe we could use our modifier convention to account for these? That would look like this:

```css
.even-grid_wide {
/* styles for root of wide module variant */
}

.even-grid_wide--item {
/* styles for a subcomponent of wide module variant,
only if it needs special styling */
}
```

```html

```
Thoughts?