It sounds like you’re in a bit of a sticky situation with your CSS! I’ve definitely been there too. Instead of duplicating classes, you might want to consider a few different approaches that can help keep your styles clean and maintainable.

One popular method is to use Class Variations. For instance, you could modify the existing `.button-primary` class to accommodate different styles without creating completely new classes. Here’s how it could look:

    .button-primary {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
    }

    .button-primary.warning {
        background-color: orange; /* This is your warning color */
    }
    

Then, in your HTML, you could just do:

<button class="button-primary warning">Warning Button</button>

This way, you can modify bits and pieces without cluttering your CSS with a lot of similar classes!

Another technique you could look into is using Utility Classes. This method applies single-purpose classes that can be combined for various components. For instance:

    .bg-orange { background-color: orange; }
    .text-white { color: white; }
    

And then just combine them:

<button class="button-primary bg-orange text-white">Warning Button</button>

Also, if you’re interested in a more advanced approach, you can explore CSS preprocessors like SASS or LESS. They allow you to use variables and nesting, which can really help keep things organized. Here’s a quick example with SASS:

    $primary-color: blue;
    $warning-color: orange;

    .button {
        background-color: $primary-color;
        color: white;

        &.warning {
            background-color: $warning-color;
        }
    }
    

Ultimately, the key is to keep things DRY (Don’t Repeat Yourself!). This will definitely make your workflow easier in the long run. It can be a little daunting at first, but as you keep practicing these techniques, your stylesheets will thank you!

Hope this helps out a bit! Good luck with your CSS journey!