Rules when reusing css code from existing code

re-use-css-code-rules.md

I have css code apply html code. Now, I want to re-use it but customizing it. Rule is that always add more class into new code instead of changing old code (need to change everywhere). Example:

<div class="box">
  <div class="header">header</div>
  <div class="body">body</div>
  <div class="footer">footer</div>
</div>

.box { color: yellow; font-size: 20px;}
.box:hover {color: red; }

I want to re-use .box again but need to customizing that when :hover, color will yellow.

<!-- don't change anything from old box -->
<div class="box">
  <div class="header">header</div>
  <div class="body">body</div>
  <div class="footer">footer</div>
</div>

<div class="box new">
  <div class="header">header</div>
  <div class="body">body</div>
  <div class="footer">footer</div>
</div>

.box { color: yellow; font-size: 20px;}
.box:hover {color: red; }
.box.new:hover {color: yellow; }

Don't change old code by adding .old into .box like that even css is optimized

<div class="box old"> <!-- add `.old`-->
  <div class="header">header</div>
  <div class="body">body</div>
  <div class="footer">footer</div>
</div>

<div class="box new">
  <div class="header">header</div>
  <div class="body">body</div>
  <div class="footer">footer</div>
</div>

.box { color: yellow; font-size: 20px;}
.box.old:hover {color: red; }