Classセレクタにスペースを開けることでセレクタをわけて設定することができる

例HTML
<div class="セレクタA セレクタ01"></div>
<div class="セレクタA セレクタ02"></div>
<div class="セレクタA セレクタ03"></div>
例CSS
.セレクタA
{セレクタA全体のスタイル値}
.セレクタ01
{セレクタAのグループ内のセレクタ01のセレクタ値}

Divの大きさ、文字をセレクタAで統一して
セレクタ01で背景色を分ける事ができる

HTMLにするとこんな感じ
<style>
.zentai {
width:400px;
height:50px;
font-size:20px;
text-align:center;
padding-top: 25px;
}
.haikei01{background-color: #FC0;}
.haikei02{background-color: #CC0;}
.haikei03{background-color: #9C0;}
</style>

<body>
<div class="zentai haikei01">テキスト</div>
<div class="zentai haikei02">テキスト</div>
<div class="zentai haikei03">テキスト</div>
</body>

すると
スクリーンショット 2019-07-28 20.21.39
こんな感じで表示される

結構便利