How do you manage with old HTML and CSS code?

Some days ago I had to edit a HTML5 page I wrote some months ago.

I did not believe I wrote such a weird code.
But this is not a post to blame me for my code.

What I would like to ask you is: how do you manage with old HTML code that
can be "fixed" easly?

HTML is a weird language, everyone agrees.

It almost always works :)

Anyway, you can write good HTML, and bad HTML, given that you use a doctype.

The page I was editing was full of sections written like this:

<div class="section blue">
    <h3>Section Title</h3>
    <p class="content">
        some text content
    </p>
    <div class="sectionbottom">
        <a class="#">link 1</a>
        <a class="#">link 2</a>
        <a class="#">link 3</a>
    </div>
</div>

This HTML code worked perfectly.
And the site I was working on is full of this kind of HTML code.

There are some ugly things in those few lines anyway:

• Non semantic elements
• Non semantic classes
• Too generic classes

I had to add a section to the page, and I had two options:

• write ugly code, to keep consinstency
• write nice code, breaking consinstency

My first idea was to rewrite the entire page, but I have to manage with
budget. Is this good for my company to rewrite everything?

So, I asked help to a collegue.
He said: "keep with ugly code and bill :) ASAP"

So, my final decision was to keep using bad code, and put to our SCRUM
backlog a user story for refactoring.

By the way, if I decided to, I would have written the section like this:

<section class="join-us section-secondary">
    <header>
        <h1>Section Title</h1>
    </header>
    <div class="section-secondary__content">
        <p>
            some text content
        </p>
    </div>
    <footer>
        <nav class="section-secondary__navigation">
            <a class="#">link 1</a>
            <a class="#">link 2</a>
            <a class="#">link 3</a>
        <nav>
    </footer>
</div>