This may be a stupid question and I have found a few answers throughout the web, but most of them contradict the inherent nature of these tags. Just want to make sure I am not making a mistake as I am about to completely overhaul my first website.
When setting up the layout/structure of a page, is it best to use “class” or “id”?
Now, I figured I’d use “id” to identify the various “containers” (#header) and further “id” to identify subsections (#header-left), then use “class” to define common features within the sections (.image-logo). But a lot of sites point towards using class to define the different sections of the page. Is it proper to use “class” in the case that your various pages share a common structure?
I’m sure this has already been answered, so if you can point me to a prior post, that would be great. I was told this site was ground zero for pros, so thanks in advance for the help.
Hi m1ckrz, welcome to the forums
It’s all very simple really. An id is unique and there should be only one per page. Classes can apply to a multiple number of elements (usually related in some way).
I’ve seen some software (eg. WordPress) that seem to add classes to just about everything. IMHO, although this adds more opportunity to target them it’s over-kill.
So a lot depends on what you plan on doing with the mark-up using CSS and JavaScript.
My approach would be to get the mark-up nice and semantic first, then add ids and classes as needed.
Hi,
The main problems with ids is one of specificity. You need to be very careful about the weight of the rules you are using or you end up with a long chain of code that becomes awkward to manage.
A simple example.
You code a paragraph in your header with this rule.
#header p{background:red}
Now say you have a various paragraphs that you want blue so you set up a class for them.
p.special {background:blue}
The above won’t work because of the specificity of #header p winning out.
However if you had used a class to start with.
.header p {background:red}
p.special {background:blue}
The above will work as expected and you won’t have to add extra code such as ‘#header p.special’ to make it work.
When I structure a page I tend to use ids for the main structural elements (#header,#footer,#main,#nav) but I seldom use those ids to reference the code within and would rather add a class to the element instead.
<div id=“header” class=“header”>
It’s a little more html but it’s a lot more future proof and still allows you to have id hooks on your major sections. For internal elements I tend to use classes all the time because I often find that I want to re-use the class somewhere else or at least some of the rules from that class so that I can use a modifying class to change them.
In the end it does revolve around consistency and preference but classes do make for a more re-usable structure and if you can also avoid long descendant selectors you simplify the maintenance of the code.
I’m in the same boat with @Paul_O_B except perhaps a little more extreme in that I tend to take a “class first” / “id-if-needed” approach. Most divs, etc, that need to be targeted by CSS, get a class. The only "id"s that are used are for items that require them such as fragment identifiers, form objects, and JavaScript targets… and the "id"s are rarely used to apply styles. As such, there are few "id"s on my stylesheets. The exception that I sometimes make is adding an “id” to a <body> tag to uniquely identify a page. I like to “keep specificity simple”.