It's best to have classnames be specific and a combination of at least two words. Using a single word often isn't descriptive enough. Using multiple words also reduces the risk of multiple kinds of item accidentally ending up with the same classname.
Never make classnames using color or position. The items may change color or position, making the classname no longer accurate. I wouldn't name something .red-button-left for example nor .button.left.red. Instead I would name it something like .email-subscribe-button.button-style-primary. The exception to this rule is when using frameworks which require that sort of silliness.
I often use classnames as a representation of what it is specifically, what it is generically, how it is styled, and what it's state is. For example,
<button class="email-submit submit-button button-style-primary disabled-button">