Variants layer?

[eric-harms]

Lets say that I have a container object that sections off content from the rest of the page.

.o-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
} 

It could have modifiers to create sizing variants.

.o-container--width-medium {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

I also might have utility classes to change its color or center text.

.u-align-center {
    text-align: center;
}

.u-color-accent {
    color: #eee;
 }

The markup for this simple example would look like this

<div class="o-container o-container--width-medium u-align-center u-color-accent">
</div>

Is it bad practice for me to create a variants layer of sorts in the inverted triangle? The idea would be to keep the modify and utility classes, but create an additional class that combines what a region of the page might need.

.v-container-header { } /* might combine u-color-primary and u-ualign-right with other rules */
.v-container-footer { } /* might combine u-color-accent and u-ualign-center with other rules */

I'm noticing that I have things abstracted out too well for other people on the team. I really don't know if this is a good idea, or if there is a better way to handle occurrences where I'm using four or five classes.

[eric-harms]

I guess this would be similar to the BEVM (Block Element Variation Modifier) methodology, minus Sass @extends