Why use Classes or IDs on the HTML element?

Question

I'm frequently seeing ID and class specifications to <body> and <html> elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS?

Maybe you want different styles applied to the `body` on different pages of your site using a shared stylesheet. How would you do that without `id` or `class`? — Turnip, Oct 18 '13 at 12:27
Evidence says yes, but for now it may be better to start an ID with a letter, for various reasons. — Mr Lister, Oct 18 '13 at 12:31
I like to use classes on the body tag to be able to differentiate between different pages (not that I've needed it much, actually). It's actually not good practice to use an ID for CSS purposes, keep IDs for JavaScript only. — Marijke Luttekes, Oct 18 '13 at 12:31
@MarijkeLuttekes IDs are meant to be used for identification purposes, yes. However, that doesn't mean that if you do have an ID, you can't use it as a selector in CSS either. Putting a class on the same element, just to avoid using the ID in the CSS, is not something I would recommend. — Mr Lister, Oct 18 '13 at 12:33
so if i hv to use numeric value ,i will hv to append it to a string. and to get the nuneric value back , i will hv to split the string??? — php developer, Oct 18 '13 at 12:33
@php developer - start a new thread. This has nothing to do with your original post — Turnip, Oct 18 '13 at 12:34
@MrLister I'm trying to find an article about this I read a long time ago, which has multiple good arguments to this. One thing is that styles assigned to an ID, are almost impossible to overrule by class CSS. The author had tested that an ID weighs about 250 times heavier than a class. Plus, you can assign multiple classes to an element, but only one ID. And that ID has to be unique, so there's no reusability. — Marijke Luttekes, Oct 18 '13 at 12:36
@3rror404 Yes, but the new thread would be a duplicate of [this one](http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number/5673069#5673069). — Mr Lister, Oct 18 '13 at 12:36
@MarijkeLuttekes I am sorry, but this is completely ridiculous. IDs are *not* for JavaScript only. I have no idea why you would come to that conclusion. It's exactly the point of an ID to be unique. — Bram Vanroy, Oct 18 '13 at 12:37
@BramVanroy Ok, so it's not absolutely not-done to use IDs in CSS. If your style applies to only one specific element that appears only once. But relying mostly on IDs for CSS, where classes are sufficient is in my opinion still overkill and bad practice. (See also my previous comment) — Marijke Luttekes, Oct 18 '13 at 12:43
@MarijkeLuttekes You got it twisted. Using a class only once in a page or whole website is overkill and bad practice. Those classes should then be IDs. Why would you need a class that you only use once? IDs exist for that reason. When a class selector is read in CSS, the whole HTML document will be scanned for the class, even after multiple occurances of the class. Not with an ID. After an ID is found, the next rule will be read. So basically, your "overkill and bad practice" applies on your own idea. If you could cite sources, I might consider what you said, but this is getting quite idiotic. — Bram Vanroy, Oct 18 '13 at 12:47
@BramVanroy I find your choice of words poor and unnecessarily insulting, but alas. I can't find the article I was looking for, though here's a similar one, which links to a follow-up article. http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/. Personally I prefer to use classes to give a more detailed description of an element's context. I don't use classes much, try to keep the shortest possible selectors and I use no IDs in CSS. And it works perfectly. If you don't agree, then let's agree to disagree, because I care not to spend more time on you :) — Marijke Luttekes, Oct 18 '13 at 13:00
@MarijkeLuttekes Likewise. And you don't use classes much *and* you don't use IDs. I am curious as to how big your websites were that you have ever built. Looking at your own webpage, you don't seem to need any semantic sub divisions in your HTML. This is not an insult, but a state of fact. But fine, let's agree to disagree. If you want, you can make a new post about this. — Bram Vanroy, Oct 18 '13 at 13:08

score 0 · Answer 1 · answered Oct 18 '13 at 12:34

Hi your tags were erased in your question i guess that you are talking about the <html> and <body> tags. I use this in many cases where i need to refer an specific class to change. For example i have an Interface that changes depend of the user rol some properties like background color and buttons, then i assign to the body a class or ID that changes all those things making specific variations on the CSS.

body.Administrator .container {
  background-color:#000;
}

You can Check this link it's all about more control in some specific cases

http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

score 0 · Answer 2 · answered Oct 18 '13 at 12:48

The most commonly used reason to use CSS classes in a <body> or <html> tag is due to browser sniffing / modernizr.

Browser sniffing means you want to know which browser you're dealing with, so you can adapt styles by using the specific browser class it gets.

Usually this is rendered by JavaScript or PHP

so basically if you're in firefox, you could see <html class="ff ff18 gecko gecko18"> In css if you had a container, you could style that container differently by using the class in HTML.

This works because CSS cascades, so the nested elements will be children of the parent element.

therefore you can overwrite existing styles by adding new styles below them, prefixed with the class found in the <html> or <body> tag.

e.g. .ff .container {color: blue; /*will only apply to firefox*/}

Why use Classes or IDs on the HTML element?

2 Answers2