CSS classes rather than IDs in first few projects?

The first few FCC projects include several user stories like this:

“User Story #1: My tribute page should have an element with a corresponding id=“main”, which contains all other elements.”
Build a tribute page

In these first few projects, I think FCC should get students into good habits by pushing them towards using classes rather than IDs as much as possible. The reasons why are laid out here by Harry Roberts: The Specificity graph

Clearly in these initial small projects, using IDs rather than classes won’t cause any problems at all. But still we should be encouraging students to keep the specificity of their CSS as low as possible from day one, I think.


@danielrlc I agree, in terms of CSS styling. However, for these projects, fCC doesn’t force people to use those IDs for styling. I did all of them without styling IDs and only used the IDs for passing the tests.

As I’m getting more into JavaScript, I’m noticing that IDs are helpful in HTML markup so I can use getElementById(). It could be argued that these projects are preparing people for HTML markup that’s better suited for JavaScript. :clipboard:

@camper I agree. Using IDs for applying JavaScript and classes for CSS styling is a great way of keeping interactivity and styling nicely separate. But I think the temptation for beginners to use those same IDs for CSS styling is strong. Perhaps these early projects could explicitly recommend using classes for CSS styling, and start using IDs later on when JavaScript gets introduced?

@danielrlc I think that’s a good idea. Create a GitHub issue if there isn’t one already.

Great. I’ll check if there’s a GitHub issue and add one if not.

In Javascript, you can use querySelector and querySelectorAll instead of getElementById. An example of use is here, lines 25-38. Note that for all of these I used classes (using the .class syntax), but querySelector also works with #id’s and with just element tags (eg. querySelectorAll('li')), as well as attributes such as I used in this project. Notice when selecting attributes I did it in two different ways, selecting just the tag and also selecting the tag+value combination.

So there’s no need to use id tags for javascript selection, querySelector is much more robust.

With respect to the main topic, I strongly agree with using classes instead of ids for the FCC projects.

@CTKShadow I’ve been wondering about using querySelector instead of getElementById. While learning React, all of the documentation I see uses getElementById so I assumed there was a good reason for that.

One potential problem I can think of when using querySelector: I’ve got the code looking for an element with a specific class, it returns the first match. All is working. What if someone comes along later and creates a new element above/before that element, using the same class since classes can be reused? Now the code is selecting that new element instead of the previous one.

Can you share the resources that helped you choose querySelector over getElementById? I’m curious to learn more about this.

I did Wes Bos’s Javascript30 course which taught me an absolutely amazing number of things in each of the first few videos (even though I generally don’t do well with video courses), and he uses querySelector and querySelectorAll for everything.

I do see your point about later modifications, but in the context of using classes instead of ids even when targeting unique elements (eg. ‘.display’ instead of ‘#display’) to minimize specificity (which seems to be the standard), you’re going to run into issues if people go in and start mucking with your html without understanding its structure anyway. When I think of the projects I’ve built using querySelector and querySelectorAll, there’s been no cases where this would really be an issue because anything I select with querySelector is unique and therefore I’ve selected it as such. If there’s multiple elements that could be targeted with a given querySelector argument, I’ll use a different argument that is unique to the element I want to target, or I’ll use querySelectorAll if I want to target several elements in the same way (such as number buttons in the calculator I linked).

1 Like

Using classes at the beginning of your journey to learn styling its kinda tricky because you have not learned yet about css rules precedence. Pushing you to use ids its more convenient for the test module and also for you because you know exactly what element you target and what style you finally apply to it.

1 Like