Here I'll cover how I've learned to organize html with css
If you haven’t noticed yet, organizing your code is very important. While it takes time to organize it can save hours of searching and debugging later! I’ve only been a developer for a short time but looking through my own and other peoples’ code can sometimes be a game of Russian roulette. It can be fun creating a website, but it can start getting tedious with divs in divs in divs in sections in normal semantic element like main, nav, ect.. naming divs based on their parent elements has saved me SO MUCH time when going back to old or even current projects. For example on your website you may create a section to display notifications. before you start, consider sketching your design and name the sections like the example below.
This is just an example and there can still be improvement. For example, you can create “universal” semantic tags which can apply to all necessary html elements. The idea is simplification! Once you’ve drawn out (or atleast thought about) your elements’ designs you can start creating! As you’re creating you may start noticing duplications or similarities between chunks of code. Files can get overwhelming if you keep repeating code so try your best to simplify! The sooner your start simplifying the easier it is to keep code simple!
One practice I’ve started is after every chunk of code I add, I skim over that section of code and try to simplify. There’re several ways to do the same thing, and sometimes just (re)reading your code will show you knew ways to do them!
CODE ON EVERYONE! Hope this was helpful and have a wonderful day :D