Как сделать подклассы класса CSS

[class^="class"] { 
  display: inline-block; 
  margin: 5px; 
  width: 50px; 
  height: 50px; 
  background-color: rgb(126, 173, 207); 
} 
 
[class^="class"]:hover { 
 background-color: red; 
}

<div class="class1"></div> 
<div class="class2"></div> 
<div class="class3"></div> 
<div class="class4"></div>

/* Здесь чтобы к классу class добавить class-1 пишем как тут */ 
.class { 
    background: red; 
} 
.class.class-1 { 
    color: #fff; 
} 
.class.class-2 { 
    color: #000; 
} 
.class.class-3 { 
    color: green; 
}

<div class="class class-1"> 
            hello 
        </div> 
        <div class="class class-2"> 
            world 
        </div> 
        <div class="class class-3"> 
            XD 
        </div>

.class-1, .class-2, .class-3 { /* как-то так пишешь*/ 
    background: red; 
} 
.class-1 { 
    color: #fff; 
} 
.class-2 { 
    color: #000; 
} 
.class-3 { 
    color: green; 
}

        <div class="class-1"> 
            hello 
        </div> 
        <div class="class-2"> 
            world 
        </div> 
        <div class="class-3"> 
            XD 
        </div>