jsledgers-naming.md

The SCSS

%component1--element1 {
    display: block; 
}

%component1--element1--color-modifier1 {
    color: #fff; 
}

%component1--element1--color-modifier2 {
    color: #eee; 
}

%component1--element1--color-modifier3 {
    color: #ccc; 
}

%component1--element1--color-modifier4 {
    color: #333; 
}

%component1--element1--color-modifier5 {
    color: #000; 
}

%component1--element1--background-modifier1 {
    background: #fff; 
}

%component1--element1--background-modifier2 {
    background: #eee; 
}

%component1--element1--background-modifier3 {
    background: #ccc; 
}

%component1--element1--background-modifier4 {
    background: #333; 
}

%component1--element1--background-modifier5 {
    background: #000; 
}

.my-semantic-class1 {
  @extend %component1--element1;
  @extend %component1--element1--color-modifier1;
  @extend %component1--element1--background-modifier5;
}

.my-semantic-class2 {
  @extend %component1--element1;
  @extend %component1--element1--color-modifier1;
  @extend %component1--element1--background-modifier3;
}

#my-id-based-selector1 {
  @extend %component1--element1;
  @extend %component1--element1--color-modifier2;
  @extend %component1--element1--background-modifier4;
}

#my-id-based-selector2 {
  @extend %component1--element1;
  @extend %component1--element1--color-modifier5;
  @extend %component1--element1--background-modifier3;
}

#my-id-based-selector3 {
  @extend %component1--element1;
  @extend %component1--element1--color-modifier2;
  @extend %component1--element1--background-modifier5;
}

The CSS

.my-semantic-class1, .my-semantic-class2, #my-id-based-selector1,
#my-id-based-selector2, #my-id-based-selector3 {
  display: block;
}

.my-semantic-class1, .my-semantic-class2 {
  color: #fff;
}

#my-id-based-selector1, #my-id-based-selector3 {
  color: #eee;
}

#my-id-based-selector2 {
  color: #000;
}

.my-semantic-class2, #my-id-based-selector2 {
  background: #ccc;
}

#my-id-based-selector1 {
  background: #333;
}

.my-semantic-class1, #my-id-based-selector3 {
  background: #000;
}

This is the basic principle behind Atomic Blueprint CSS Design (ABCD), which combines an OOCSS design pattern with BEM-like naming conventions for SCSS placeholders and semantic CSS selectors similar to The Semantic Grid System.