o-: Object may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.
l-: Layout is a superset of Object. It follows the same rules, but clearly identifies it's position in the composition.
c-: Component is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
u-: Utility has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI.
t-: Theme lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.
s-: Scope creates a new styling context. Similar to a Theme, but not necessarily cosmetic, these should be used sparingly.
is-, has-: State or Condition tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.
_: Hack. Sometimes (although incredibly rarely) we need to add a class in our markup in order to force something to work. If we do this, we need to let others know that this class is less than ideal, and hopefully temporary (i.e. ‘do not bind onto this’).
js-: JavaScript hook. This piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour (NOTE: It would be prefered to use a data attribute instead of a CSS name e.g data-js-thing for this)