id vs class & 3 div's aligned on one line.

[LeonLatex]

Just to describe i use  external .css script files and w3-css. In the example frome me i am using inline CSS just to describe my example and question.

I have 3 divs aligned on one line. One div for my menu, one div for the main content and one div for what ever i want to use it for. It looks like this:

<div id="container"><div id="left">Some Menu Content</div>

<div id="center">Some Content Main</div>

</div> <div id="right">Some Content Right</div>

I mostly use CLASS of old habit. I can not quite put my finger on why it is so. What are the pros and cons of using CLASS = "..." and ID = "..." Bring as many of each you know for each of them. I welcome other tips that are relevant to this thread.

Edited January 26, 2022 by LeonLatex

[requinix]

An ID means there is only one on the page, there can only ever possibly be that one on the page, and it should probably represent something specific and special.

A class means you want to apply some CSS rules or Javascript processing to it.

<div class="container">
  <div id="page-navigation" class="left"></div>
  <div id="page-content" class="center"></div>
  <div id="page-sidebar" class="right"></div>
</div>

The first DIV is the one, single container used by the page for the main content. It doesn't need an ID because you don't need to do anything special to it. It does act like a generic .container.

#page-navigation has links or whatever relevant to the page. It has an ID because you might want to style the contents differently. Inside the container it acts like a .left.

#page-content is the content for the page. It has an ID because maybe it has some special border or background, or maybe you want to run some Javascript on what's inside. It acts like a .center.

#page-sidebar has maybe ads or additional information or something like that. It has an ID because that way to can target it with Javascript to place the ads. It acts like a .right.

[LeonLatex]

Exactly what i needed to hear. For god's sake, I did not think that far. That's why. Now I also figured out why CLASS is sitting so far inside me too.

Thanks requinix 👌👍

Edited January 26, 2022 by LeonLatex