Name classes in lowercase with hyphens (.card-title, not .cardTitle). Hyphens match the style of CSS property names, and they let the [class|="btn"] attribute selector (Attribute Selectors) match hyphen-separated prefixes. Name classes after what a thing is (.price), not how it looks today (.red-bold), so a redesign changes CSS, not HTML.
For components, the BEM convention (Block, Element, Modifier) is the most widely used: a block is a standalone component, an element is a part of it joined with two underscores, and a modifier is a variant joined with two hyphens.
/* <div class="card card--featured"><h3 class="card__title">Pro</h3></div> */
.card { border: 1px solid #b0bec5; padding: 8px 14px; } /* block */
.card__title { margin: 0 0 4px; } /* element */
.card--featured { border-color: #1565c0; } /* modifier */Every BEM selector is a single class, so all rules share one specificity (0-1-0) and source order alone settles conflicts. The cost is long class names in HTML.