Question: Do you notice that this webpage is different?
The whole page is no longer using the framework Bulma and relies on my own custom classes
Classes and Ids are used to specify elements in a page.
This is particularly useful because you can use these specific classes and ids to change the html document using Cascading Style Sheets or Javascript
Ids are used for unique elements like a specific post from a blog. If the post from a blog has an Id the styles can be changed for the specific post.
Also if you have javascript you can manipulate the individual element instead of multiple classes.
Link: Example of Ids in use.
<div id="e6411de" class="post"></div>
Another good example is supose you need to navigate to a specific location in page. There is an index you referenced at the bottom of a wiki page and you need to go to it right away.
You can use the unique ID of that reference link to quickly navigate.
<a href="#reference">Click Me</a>
Classes are used for multiple elements of the same type.
<div class="container"></div>
Also Classes are easily added to an element
Link: Example of multiple containers with classes
<div class="container blue"></div>
It's universally guideline for every web designer to follow the rules other wise there would be chaos
For example if you use IDs for multiple elements as well as classes for multiple elements. Other designers in your team would find it difficult if IDs are unique or classes are not.
The Designers in your team might confuse the uses of the two and the styles will be messed up.