Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Class or ID on Body Tag

I've been applying an ID to the body tag of my HTML documents lately to allow greater CSS control (#9). Recently the though occurred to me that I could do exactly the same thing by applying a class to the body tag. I want to know positives and negatives of each choice. If I have multiple pages where the body tag has the same ID, is it better to use a class? What do you think? Why?

UPDATE: The class/ID is basically what I intend to use to identify to the stylesheet which page or type of page the stylesheet is being applied to. For example, is it the homepage, the contact page, one of many search results pages, an archive page, etc?

like image 308
Jo Sprague Avatar asked Oct 12 '10 22:10

Jo Sprague


People also ask

Can I put ID on body tag?

You can (read: should) only use the id on the body tag. 1 Body tag = 1 id tag. This can be the same on different pages. Essentially, using the class tag is probably overkill for this purpose.

Can a tag have a class and an ID?

Yes, you can. But note that Id's must be unique within your html file, while classes can be used in multiples elements.

Can a body element have a class?

Styling the Body element. Like any other element, you can style the Body element by using classes, and you can use the same class to style other pages across your project.

Can I put class in body HTML?

Tip: The class attribute can be used on any HTML element. Note: The class name is case sensitive!


3 Answers

Using a class is perfectly acceptable, possibly more so than using an id. Use of ids should be limited as much as possible, because they can clash with other ids and break things like document.getElementById.

An id selector is more specific than a class selector, which usually makes it a better choice for your use case. -- David Dorward

However, a high "specificness" is not always desirable. Consider body#faq #col_b a {color:gray;} in master stylesheet and then someone develops a plugin with a gray background that goes on faq page, now they need to use !important or create another id attribute to give higher specificity.

Also, consider the use of multiple classes in a single body element:

<body class="faq two_column big_footer"> ...
like image 117
Dagg Nabbit Avatar answered Oct 19 '22 09:10

Dagg Nabbit


An id selector is more specific than a class selector, which usually makes it a better choice for your use case.

like image 42
Quentin Avatar answered Oct 19 '22 09:10

Quentin


ID needs to be unique per page (if you want valid markup), meaning only one instance of a particular ID should exist on a page.

Classes, on the other hand, can be applied to numerous elements per page. Use classes for things that reuse the same styles and use IDs for more unique elements that require their own styling.

Ideally, use classes whenever possible and limit the use of IDs.

For more information on ID, see here, and more on classes, see here.

like image 2
Tyler Treat Avatar answered Oct 19 '22 11:10

Tyler Treat