My CSS naming convention

css-naming-convention.md

My convention for CSS naming is:

• For a component, pascal-case (capitalized + camel-case) the root class name, Button
• For any other element classes within that component, use the component name followed by a dash - and then the element'c class name in dash case icon, so Button's icon would be Button-icon.
• For modifiers, meaning classes that override styles from a base class name, use the component name followed by two dashes -- and then the class name in dash case shopping-cart, so Button's icon style overrides for the shopping cart icon would be Button-icon--shopping-cart.

A button component with an icon and text:

<button class='Button Button--primary'>
  <i class='Button-icon Button-icon--shopping-cart'></i>
  <span class='Button-text'>Buy my hams</span>
</button>

The CSS is:

.Button {}
.Button--primary {
  background-color blue;
  color: white;
}

.Button-icon {}
.Button-icon--shopping-cart {
  content: '🛒';
}

.Button-text {}

The LESS is:

.Button {
  &--primary {
    background-color blue;
    color: white;
  }
  
  &-icon {
    &--shopping-cart {
      content: '🛒';
    }
  }
  
  &-text {}
}