Use HTML Tag Names, Classes or Ids in CSS

Use HTML tag names, classes or IDs in CSS?

In general you should be as specific as the item demands.

There is no general rule, it depends on the style in question.

A lot of people will recommend you keep to the lowest specificity with the theory that this allows the maximum cascading reuse but this is absolutely toxic in real world situations where you have multiple developers all working on slightly different versions of what a .foo might look like. Pollution from inheritance you did not want leads to massive bloat in trying to undo that locally or time-loss in refactoring.

The best guideline I always offer is to try and think of CSS in OO terms: class selectors map to interfaces more or less, tags map to classes, and ID selectors map to instances. Consequently decide if the style you want to apply really applies to that thing, all things like it, or anything which wants it.

I also strongly encourage you to make use of high level IDs on wrapper elements so you can write selectors in a namespace like fashion (i.e. #foo .bar, #foo .baz where #foo is unique to a page or set of page designs) which allows you both a level of specificity which reduces cross-design pollution and a level of generality which lets you make the most of cascading CSS reuse.

Best of both worlds.

Classes and Ids do not work in Style Tags

Class names must begin with a letter.

CSS class and id with the same name

Nope, perfectly acceptable.

A class is defined using a . and an ID is defined using a #. So as far as the browser is concerned, they're two totally separate items.

The only thing to be careful of is generating any confusion for yourself. It's probably best practise to keep the names different purely for code readability, but there's no harm in them being the same.

What is the difference between id and class in CSS, and when should I use them?

For more info on this click here.

Example

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is color so the above should read:

Example

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

Is there any reason for including the tag name with a class or ID selector in CSS?

1. They are more specific, so long ones will override the shorter version if they conflict. div.foo will have a specificity of 11 while .foo has a specificity of 10.
2. Since they are more specific, you know exactly which nodename the class applies to instead of being a universal rule for all node names, this can help if you have a huge application with tons of elements that all have the same class names, it can lessen the time for you to find the element in the source/text editor.

HTML - Using same name for an ID and a Class

Yes, it's valid to do it. It's not common to need to do it, though: it's a bit of a code smell. It may indicate you need to revisit your naming conventions.

To expand on the issue of naming conventions and semantics:

When you use an ID of wrapper, you're saying "This is the wrapper - the only one of its kind". When you use a class of wrapper you're saying "This is one of the wrappers, and there may be others like it". Saying both of those things at the same time is a bit weird, right?

I'd suggest that you use a specific ID: #primaryWrapper, #outerWrapper, etc. That means you're expressing 'primaryWrapper is one of the wrappers', which makes heaps more sense.

What is the standard naming convention for html/css ids and classes?

There isn't one.

I use underscores all the time, due to hyphens messing up the syntax highlighting of my text editor (Gedit), but that's personal preference.

I've seen all these conventions used all over the place. Use the one that you think is best - the one that looks nicest/easiest to read for you, as well as easiest to type because you'll be using it a lot. For example, if you've got your underscore key on the underside of the keyboard (unlikely, but entirely possible), then stick to hyphens. Just go with what is best for yourself. Additionally, all 3 of these conventions are easily readable. If you're working in a team, remember to keep with the team-specified convention (if any).

Update 2012

I've changed how I program over time. I now use camel case (thisIsASelector) instead of hyphens now; I find the latter rather ugly. Use whatever you prefer, which may easily change over time.

Update 2013

It looks like I like to mix things up yearly... After switching to Sublime Text and using Bootstrap for a while, I've gone back to dashes. To me now they look a lot cleaner than un_der_scores or camelCase. My original point still stands though: there isn't a standard.

Update 2015

An interesting corner case with conventions here is Rust. I really like the language, but the compiler will warn you if you define stuff using anything other than underscore_case. You can turn the warning off, but it's interesting the compiler strongly suggests a convention by default. I imagine in larger projects it leads to cleaner code which is no bad thing.

Update 2016 (you asked for it)

I've adopted the BEM standard for my projects going forward. The class names end up being quite verbose, but I think it gives good structure and reusability to the classes and CSS that goes with them. I suppose BEM is actually a standard (so my no becomes a yes perhaps) but it's still up to you what you decide to use in a project. Most importantly: be consistent with what you choose.

Update 2019 (you asked for it)

After writing no CSS for quite a while, I started working at a place that uses OOCSS in one of their products. I personally find it pretty unpleasant to litter classes everywhere, but not having to jump between HTML and CSS all the time feels quite productive.

I'm still settled on BEM, though. It's verbose, but the namespacing makes working with it in React components very natural. It's also great for selecting specific elements when browser testing.

OOCSS and BEM are just some of the CSS standards out there. Pick one that works for you - they're all full of compromises because CSS just isn't that good.

Update 2020

A boring update this year. I'm still using BEM. My position hasn't really changed from the 2019 update for the reasons listed above. Use what works for you that scales with your team size and hides as much or as little of CSS' poor featureset as you like.

Mentioning the HTML TAG element before a CLASS or ID (Good or unnecessary CSS practice?)

It depends what you want to happen.

#content

will apply to everything with id="content", but

div#content

will only apply to a <div> with id="content".

This is usually more of an issue with classes since IDs should be unique across all elements on a page.

So the bottom line is, if you know the style information will only apply to HTML elements of a certain type, then include the element tag. This can stop styles from being unexpectedly applied to different elements with the same class (or ID, but that's naughty).

Tag name in CSS selector (e.g. div#id): how is it read? (Left to right or right to left?)

Ok, I think you've gotten a little confused.

In your example, you use:

div table a

So i'll use that.

Pretty much, that could look like this in your html

<div>
 <table>
    <a>
      //styling applied here
    </a>
 </table>
</div>

or something else like

<div>
  <div></div>
  <table>  
     <tr>
       <th>hi there</th>
       <th>
          <a>i'm an a tag!</a>
            

So, looking at that:

div table a

will be

div table a

 ^    ^   ^
 |    |   |
 |    |    a child
 |    |
 |   parent
 |
grandparent

This means that you'll be styling any 'a' element that is a child/descendant of a table, which, in turn, is a descendant of a div element

so, in your other example:

div#div_id

you would be styling all id's of div_id in which have a div as a parent.

---

BTW looking at your example, I would like to point out that (in case you didn't know):

• the id attribute should be unique
• an <a> attribute shouldn't be used directly within a <table> element (instead nest it within a th or td tag)
• If you wish to style multiple elements (of varying types), it would be more efficient to create a class, and use that instead

---

Answer after Clarification:

---

Your

 div#div_id

In HTML, since the id is meant to be unique, it will look up 'all id's' with the specified id.

It will then check if it is a div element.

This seems to be a bad example, as obviously some (older) browsers will only look for the first id, and return it instead of checking the whole webpage for any 'duplicate' id's.

With your id's being unique, you could then drop your tag as it will be left redundant/ no use

---

Summary

---

So, an example of this extended conversation in the comments:

if I wanted to style a single div (and still know it was a div that i was adding styling to), i would use the naming convention of:

<div id="my-div-to-style">
             ^
             |

[the word 'div' here could be anything]

in my css i would write:

       _  this word must match the
      /   id i used above
     |
#my-div-to-style{
//styling...
}

If i wanted to add the same styling to multiple div elements (with the scope to add it to others), i would instead use a class:

<div class="myDivStyle">

and then use:

.myDivStyle{
 //styling...
}

in this last example, I would not be restricted to just styling divs, so i wouldn't include this in my naming:

<div class="myStyle">
<a class="myStyle">
<table class="myStyle">

.myStyle{
//styling for any element I want
} 

---

Related Topics