CSS Oriented Object When Should I use it?

Question

So I learn about OOCSS, I found it really helpful, but I'm having trouble of how much should I separate the component im working on, for example I have a button, I separate the color from the structure -easy-, but should I also separate the font size so I can create a button with different font size?, and also separate the color font?, and also the font weight?, I mean what is the limit? is the limit based on the things I'm gonna need? If that is right, is the way I made the next badge correct? This is in a context where my font color of the badges is always gonna be white

This is the way I was taught

.badge {
  border-radius: 20px;
  font-size: 2rem;
  font-weight: 600;
  padding: 0.5rem 2rem;
  white-space: nowrap;
}
.badge-body-color {
  background-color: #00d9ff;
  color: white;/*this one*/
}
.badge-normal-color {
  background-color: #02cdf1;
  color: white;/*this one*/
}

This is the way I did it

.badge {
  border-radius: 20px;
  font-size: 2rem;
  font-weight: 600;
  padding: 0.5rem 2rem;
  white-space: nowrap;
  color: white;/*here is the change*/
}
.badge-small {
  font-size: 1.6rem;
}
.badge-body-color {
  background-color: #00d9ff;
}
.badge-normal-color {
  background-color: #02cdf1;
}

Is it wrong because I put the color inside the structure?