Правильно ли я создаю подклассы своего CSS?

Я делаю набор кнопок для своего сайта и нуждаюсь в некотором профессиональном понимании.

Чтобы уменьшить раздувание CSS, я хочу создать подкласс своих кнопок для разных цветов, ex .button.blue.

Будут ли следующие проблемы возникать в будущем? (при условии, что я не делаю класс только из .blue) Должен ли я вместо этого использовать что-то вроде .button.button-blue?

.button {
  display:inline-block;
  padding: 9px 18px;
  margin: 20px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background: #FFE150;
}
.button.blue {
  background: #49b8e7;
  border:1px solid #54abcf;
  border-bottom:1px solid #398fb4;
  color:#FFF
  text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
  height: 50px;
}
.header.blue {
  background: blue;
  color: #fff;
}