SashaSemanyuk SashaSemanyuk - 6 days ago 6
CSS Question

css class architecture for display

.page-setting-popup {
position: absolute;
background-color: tomato;
padding: 10px 10px 10px 0;
height: 120px;
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: flex-start;
}
.setting-popup-controls {
display: flex;
flex-flow: row;
}


I have such code in different place. I don't like that i should use display for almost every block. I think i will be great if I make some class like this.

.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}


Or it should be like this?

.flex {
display: flex;
}
.v-centered {
align-items:center;
}
.h-centered {
justify-content: center;
}
.stretch-between {
justify-content: space-between;
}


I think that the second variant is more flexible. But i need your advice)

<div class="page-setting-popup">
<div class="setting-popup-icon"><span class="zmdi zmdi-time-restore"></span></div>
<div class="setting-popup-main"><span class="setting-header text-uppercase">Sync. frequency</span>
<div class="setting-popup-controls">
<input type="number" min="0"/>
<button type="submit">V</button>
<button>X</button>
</div>
</div>



Answer

If you're styling a component, I would put all relevant styles into classes that are specific to the particular component. However, you used .flex as an example here, which is pretty generic, so whether factor it out or not is debatable. I wouldn't factor it out though.

Generally, the approach to factor out modifier classes, like .flex, .left, right etc. is pertaining to frameworks like bootstrap, since there is no assumption how and where these modifiers will be used. Again, if you're styling a component, you have a good understanding of what styles each of component's part requires and I wouldn't use modifier classes.