Id vs Div
There are often confusions when it’s appropriate to use CSS IDs and when CSS Classes should be used instead. This article geared to display an answer as well as provide more information about CSS IDs.
We should know that IDs identify a specific element and therefore must be unique on the page - you can only use a specific ID only once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and it is logic to act like this. On the other hand, classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.
So, an element can have multiple class values, while an ID must be a single value.
We may have all the time to choose between classes and Ids. So it is important to know how things works instead of working at random. So, when should I use a class and when an Id?
When we work to make a design we want to apply styles consistently. For example you want all links to be green - so using classes in this case makes sense.
IDs are used to identify particular elements. For example you have a container named header, and probably it is unique in your document - so feel free to use Id.
There is a common advantage of using both classes and Ids. If we look at the HTML code we will see markup that tells what the content is. For example, a <div id="header"> tell us that this is the header of the document. Probably at a first look we don’t want to know details about what header contains … but intuitive we know what it is about. Also there’s no possibility that there can be another header.
Having <div class="error"> tell us that this part of the page isn’t just another block, but in fact contains an error message, that can be several times used on the page.
In Conclusion: when you’re deciding whether to use class or id for your elements, consider this: the element appear only once, or could it appear several times? In the former case, use id, in the latter, use class.
Post a comment
RSS/XML