CSS CSS Basics (2014) Basic Selectors Reusing Classes

When to use type selector, id selector, class selector

I know that type selector target all the HTML tag with the same name, same with class selector, id selector is better use to format a specific element

However, is there a preference over using class selector over type selector in standard practice? id over type? ore the other way around? because in the video, we can just use h1 to format the main header, but the instructor use a class selector. same with footer(can just use footer tag, but the instructor use an id)

1 Answer

Zak Erving
Zak Erving
22,830 Points

It's true, you could style an entire website/application using nothing but element type selectors. However, type selectors are incredibly inefficient rendering-wise, and when used in a large application, you risk freezing the user's browser while it combs through all of your element tags and applies the appropriate rules (I've experienced this before on an enterprise application). Additionally, you risk backing yourself into a corner with this convention. Do you really think you can target every div with pinpoint accuracy, and—even more importantly—can you structure your markup in such a way that someone coming after you will be able to adhere to your standard?

In short: use class selectors for "like" elements, ID selectors for unique elements that depend on JavaScript, and type selectors almost never—but if you do, at least try to use an attribute pseudoclass.