Tehnical Document Exercise in Responsive Web Design

I’m a little confused – I’ve got to User Story #4 of the Technical Document and I’m just wondering about best practices.

I done a bit of digging and most of the forums I’ve read seem to say there is no golden rule when it comes to the format of your selectors but that you should be consistent in whatever your preference is (i.e. hypens, underscores, camelCase). So my understanding is if you want to use hyphens for your class selectors and underscores for your id selectors, that’s okay but you need to make sure you are consistent throughout your document.

In User Story #1 we create an id=“main-doc” for the main element, and for User Story #4 the format example is id=“JavaScript_and_Java” with hyphens replacing any spaces, can someone provide some insight for me?

Your code so far
N/A

Your browser information:
N/A

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

You have the #main-doc which inside are the .main-sections, each .main-section has its’ own ID based on the actual title of the text.

<section class="main-section" id="Burgers_and_Beaches"> <header> Burgers and Beaches </header> </section>