Insert Main Dialog Panel with a To Do

You're under no obligation to use them. The choice to assign reusable classes or unique IDs to selectors is entirely your own.  The most common reasons for using classes are to invoke CSS styles.  

<main class="container">

<main class="container-fluid">

<main class="container-[breakpoint]">  

See Bootstrap .container classes:

Unique IDs are mostly used as hooks for interactive elements like navigation targets or JavaScript functions. 

<section id="home">

   Home section

</section>

<section id="contact">

   Contact section

</section>

<nav>

<a href="#home">Link to Home</a>

<a href="#contact">Link to Contact</a>

</nav>

Javascript

document.getElementById('home');
document.getElementById('contact');