This is taken from Nicholas Gallagher’s awesome article “About HTML Semantics and CSS Architecture“.
The conventions are taken from MontageJS but Nicholas’ examples make it really clear.
/* Utility */
.u-utilityName {}
/* Component */
.ComponentName {}
/* Component modifier */
.ComponentName--modifierName {}
/* Component descendant */
.ComponentName-descendant {}
/* Component descendant modifier */
.ComponentName-descendant--modifierName {}
/* Component state (scoped to component) */
.ComponentName.is-stateOfComponent {}