Giving Elements IDs

I’ve noticed that FCC has us give most elements IDs, but I’ve also heard that we should use IDs sparingly for CSS, and to try to use the least specific selector that will work.

I know IDs are often used for JavaScript. Should we get in the habit of giving everything an ID for when we start to manipulate things with JS but use less specific selectors (like type and class ) for CSS?

Thanks

No. You only need to give elements IDs when you are actually going to use the ID for something. There is no reason to get into the habit of giving everything an ID just in case.

Ok. Just trying to figure out why they have us give everything an ID.

Can you be more specific about where they are having you give everything an ID?

Well, seven out of nine steps (every element we add) for the Tribute Page Project require IDs, for example:

1 Your tribute page should have a main element with a corresponding id of main, which contains all other elements
2 You should see an element with an id of title, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”)
3 You should see either a figure or a div element with an id of img-div
4 Within the #img-div element, you should see an img element with a corresponding id=“image”
5 Within the #img-div element, you should see an element with a corresponding id=“img-caption” that contains textual content describing the image shown in #img-div
6 You should see an element with a corresponding id=“tribute-info”, which contains textual content describing the subject of the tribute page
7 You should see an a element with a corresponding id=“tribute-link”, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab
8 Your #image should use max-width and height properties to resize responsively, relative to the width of its parent element, without exceeding its original size
9 Your img element should be centered within its parent element

OK, now that you have clarified that you were referring to the Tribute Page Project I can give you a better answer :slight_smile:

The ids are primarily being used for testing purposes. It makes it easier for the tests to verify that you are doing everything you are asked to do by adding ids onto those elements.