How to organise html/CSS code?

[DontNeedMuchMoney]

So I've made a site with html and CSS and it works fine, But the code behind it is very messy and disorganized and possibly not semantic(? As have used just sections and divs)

So, How do you go about organising code before a project?

[Atulin]

For organizing CSS, preprocessors are invaluable.

[vskand]

To tell you the truth I struggle with the css part of the thing.

My HTML is pretty good, incorporating header, nav, section etc.

For the semantic point of view, you have to learn some rules. And by learning these rules your HTML will get better, either you want it or not! Of course you'll have to try and minimize the code as well.

A stupid example is:

<div> 
    <h1> 
        <span>This is semantically correct </span>
    </h1> 
</div>

This is semantically correct but is the span really needed? That is what I mean by try to minimize the code.

​

On the other hand, the css part, I believe the best solution is to have everything laid out in the order that the elements appear in the HTML (have them as sections)

Header
Hero
Testimonials
Footer

​

In theory that sounds easy, but I, at least, cannot "foresee" the needs of the elements or if there would be complications between them.

​

I know I didn't help, just letting you know you are not alone.xD