There was an interesting Tweet circulating recently that really got me thinking. People were sharing what technologies web developers should know as we inch closer and closer to 2021. People were suggesting everything from GraphQl to Svelte, and everything in between. However, there was one person that made an observation that really resonated with me. HTML, CSS, and JavaScript were nowhere to be found on these lists, yet they are the three pillars of web development. Mastering these three in their original form will make you a much better developer when you eventually move on to those trendy new technologies. I think too often we get overwhelmed by all of the available tools and frameworks that we initially neglect how important it is to build a solid foundation in the basics. So that is what I want to focus on this week, something simple and basic like the difference between a HTML class and an ID, and when to use them.
Last week I was practicing building a landing page using only HTML, CSS, and JavaScript. As a self-taught developer and bootcamp grad, this is something I have done many times. However, between the tutorials, Googling, and opinions of different instructors, it dawned on me that I really didn't know when to use a class, or when to use an ID. I had somehow got it into my head that it was largely a matter of personal opinion, but deep down I knew that couldn't be right. So, after I had finished coding my landing page, I looked up the proper way to use HTML classes and IDs.
We use classes and IDs in our CSS to identify particular HTML elements. This is especially useful because it allows us to present the same kind of HTML element differently, depending on which styles we apply to the class or ID. For example, we could have several h1 tags on our page, but we can style each one differently by targeting each element by its unique class or ID. This is all well and good, but when do we use a class, and when do we use an ID?
The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element. Also, when it comes to specificity in CSS, IDs are more specific than classes. This means that if an element has both a class and an ID applied to it, the ID styles will be the ones the browser displays.
In the case of my landing page, which I had divided into four sections, I gave each section an ID since I only needed to style each individual section once. I also used IDs to style any other elements that needed to have their own unique styles. I used classes to style everything else. I had a section that was displaying four different blog posts, but I wanted each blog post to have the same styling, so I gave each p tag the same class. By doing this I was able to style several elements at once, but only writing styles for one class.
I hope this post has shed some light on, not only the difference between classes and IDs, but also on the importance of taking the time to learn the basics, and revisiting the basics even after you have been developing for awhile. I love using React and other cool tools as much as the next person, but let's not forget that all of our favorite tools are built on top of the core web technologies of HTML, CSS, and JavaScript. If you have a strong foundation, the sky is the limit on the kind of beautiful house that you can build on top of them.
Top comments (2)
I appreciate your article, but if I were a real noob reading this piece, it would seem to me like IDs exist for the purpose of applying CSS styling. But this is only a side effect of the ways that we can dynamically update CSS with JS.
An HTML ID allow for the unique isolation of a single DOM element - regardless of what we want to do with that DOM element once we've isolated.
With the advent of jQuery (and now, with
querySelectortools in standard JS), we can use a class as a "handle" that allows us to grab a whole slew of DOM elements But that's not what a class is for.Classes are for grouping CSS attributes. IDs are for grabbing individual DOM elements.
Such a grear article, but some additional info: just to emphasise, within a page an id must be unique.
Most important: ids are automatically created as properties on the global window object.
Good to know, that the ids are linkable, so when you have an id=“here” and you visit your webpage as .com#here, the page will be scrolled to there (if neccessary).
An one personal opinion: using ids make the code hard to maintanable, coming from its behaviour. Because it can be applied to only one element, it can not be reused (nor within a page). Additionally, it has higher precedence than the class merhod, so you have to overwrite the applied rules with !important.
Always use classes, no matter what! :)