Using <id> or <class> in Production

HTML-CSS
1

Hello everyone! I wanted to ask a question about FCC’s use of id in projects rather than class. I understand that semantically id is used to style a single element on the page, while class is used to repeat through multiple elements.

However, from what I have read on best practices, id is best avoided due to it having such a high specificity. Meaning that an element which is styled through an id creates too many circumstances of very specific styling which creates problems when your CSS file starts to expand in scope.

So, I suppose my question is just this. Does FCC use id for their projects because it is semantically correct even if it is not necessarily best for production use? Could FCC allow users in the future to choose if they want to apply styles using id or class?

2

It is best to avoid using id’s for styling (there is a PR for adding a disclaimer).

The projects use them for the tests (hooks for the selectors in the test). Just because you have to give an element an id for the test, does not mean you have to style it using that id. You can just give it a class for the styles.

Edit: I do think a lot of campers get the wrong impression because of the id’s use for the tests. And it should be addressed.

2 Likes