I've read in some articles that we should avoid id's

The Responsive Web projects though, embrace them. Why?

Can you link the articles that argue against using ids?

  1. Google Style Guides

  2. CSS for people who hate CSS

And if seen it in other places —like YouTube videos—, or StackOverflow but I don’t have links.

Google doesn’t seem to be recommending against using ids in their style guide?

In any case, it is far from a common consensus that "id = bad" and they are pretty widely used, so I’d expect anyone who has completed those projects to understand what ids are and how to use them.

one thing I have seen suggested is to avoid using ids to style your elements
but ids exist, and are a way to target a specific element univocally - which for targeting a single element with JavaScript is pretty neat

you don’t need to use the ids to style the elements, use classes as much as you want
just put the ids in there, or the tests will never pass as those rely on ids to identify the elements

1 Like

Suggestions to avoid ids usually are concerned with single page applications. It’s become pretty common for complex web apps to, under the covers, technically be a single page. In SPAs, it can be very difficult to avoid accidentally using duplicate ids (ids must be unique on a page). Also, some libraries/frameworks will work partially by generating unique ids for rendered elements, so we just sort of leave the ids alone.

freeCodeCamp is using ids in order to test your projects. Because their tests are written with no knowledge of how you will choose to design your project, they require you to use ids so that they can programmatically find the unique elements that they have requirements around. In practice, we usually write tests using a combination of implementation knowledge and similar identifying attributes (such as data-testID).

And, as @ieahleen said, ids aren’t usually used in styling.

2 Likes