Является ли хорошей практикой создавать классы, которые объединяют несколько общих стилей?

Question

[Атланта]

Например, у меня на сайте в абсолютно разных местах есть 10 кнопок и они никак не связаны логически.
6 из них имеют тень и ещё какие-нибудь общие стили. Можно ли сделать класс, например, shadow и дать этот класс этим 6 кнопкам?

.shadow {
    box-shadow: inset 1px 1px 2px 2px #000;
    color: #fff;
}

или это плохая практика и более верным будет такой вариант:

.button_1,
.button_2,
.button_3,
.button_4,
.button_5,
.button_6 {
    box-shadow: inset 1px 1px 2px 2px #000;
    color: #fff;
}

*Естественно, класс кнопок называется иначе, а не .button_№
Кнопки были просто для примера, меня интересуют не конкретно кнопки, а вообще можно ли использовать данный принцип?

Answer 1

[Fedor Rychkov]

Это нормально, зависит от ui, если кнопки на сайте в целом стандартные и разница мелкая то можно добавлять больше классов модификаторов, если совсем разные кнопки, тогда разные классы у всех.

Answer 2

[Ice]

Есть смысл, если только дальше эти классы как-то дополняются и в конце вилки отличаются.
Для примера есть общий размер, но дальше стили отличаются

.button_1,
.button_2{
padding: 1em;
}
.button_1{
color: #fff;
background: red;
}
.button_2{
box-shadow: inset 1px 1px 2px 2px #000;
background:blue;
}

Если отличий нет, в таком случае будет интуитивные разнести стили в другие классы.
комбинировать уже на выходе через html

.button{
padding: 1em;
background: red;
}
.button--color{
color: #fff;
}
.button--shadow{
box-shadow: inset 1px 1px 2px 2px #000;
}