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.
Lets say that I have a container object that sections off content from the rest of the page.
It could have modifiers to create sizing variants.
I also might have utility classes to change its color or center text.
The markup for this simple example would look like this
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.
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.