表示用CSSクラスアーキテクチャ

Question

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

私はこのようなコードを別の場所に持っています。私はほとんどすべてのブロックのディスプレイを使用する必要がありますが好きではない。私はこのようなクラスを作ると素晴らしいと思う。

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

またはこのようにする必要がありますか？

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

私は第2の変形がより柔軟であると考えます。しかし、私はあなたのアドバイスを）必要

<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 1

コンポーネントをスタイリングしている場合、私は特定のコンポーネントに固有のクラスに関連するすべてのスタイルを置きます。しかし、ここでは例として.flexを使用しました。これはかなり一般的なものなので、それを無視するかどうかは議論の余地があります。私はそれを除外しません。

これらの修飾子が使用される方法と場所を一切仮定がないので一般的に、など、.flex、.leftのように、rightを修飾するクラスを考慮するためのアプローチは、bootstrapのようなフレームワークに関連しています。繰り返しますが、コンポーネントをスタイリングしている場合は、コンポーネントの各部に必要なスタイルをよく理解しています。修飾子クラスは使用しません。