%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;
}
.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.