When using Classes, I use them for certain things that you would commonly use them for. This includes Nav-Menus, Footers, containers that have content in them, you get the idea.
Here's an example from Oxygen's new Project, WebBox(A Fork of WebWareBox). This is the Navigation-Menu inside of it's Code:
[CODE lang="html" title="Example(From WebBox, a Fork of WebWareBox)"] <main>
<div class="Navigation-Menu">
<!--Welcome the User-->
<p style="font-size: 14px;">
Welcome to WebBox, User! Please take your time to look around, settle in and see what the Software-Directory has to offer.
</p>
<img src="assets/theme/box_icons_v1/house.png" width="25" style="vertical-align: sub;"><a href="index.php"><button>Home</button></a>
<img src="assets/theme/box_icons_v1/software.png" width="25" style="vertical-align: sub;"><a href="software.php"><button>Software</button></a>
<br>
<br>
</div>
</main>[/CODE]
As you can see, I've used a Class to specify that this is a Nav-Menu. So, when modifying this Nav-Menu in CSS, I'd insert this: .Navigation-Menu { code }
And then when I insert that into my CSS, I can do whatever I want from then on. Although, if I want to change a specific peace of Content that is inside the Class, I'll need to use ID.
The only time I use ID is when there is something really specific that I want to customize using CSS. If I feel like it, I can just use Inline-CSS(Or simply, CSS that is inside a HTML Tag). But if I was going to do a lot of stuff to this specific Element, I'll need to use ID.
So, I'd insert something like this:
<h1 id="Title">Sitename</h1>
That specifies that our <h1> is an ID.
Then, in the CSS, I'd declare it using: #Title { code }
And from then on, I can do as much Customizing as I want to that single Element without changing anything else, other than that Element with the ID.
Hope this helps!