CSS – Using Classes instead of ID’s

I know there is a slew of you out there that have used CSS to give your web page that special look.  Just as I know you have been frustrated with CSS supposed,  non-responsiveness when you create a new property that doesn't seem to work.  You gave the HTML page an id selector, it should work, what's going on?

To address the question, let's first start with a quick look at CSS specificity, it all starts with specificity and the cascade. It is named Cascading Style Sheets, after all.  Specificity, or which property takes precedence over another property,  is not that difficult to understand, if you think of a card game, like pinochle or spades, where the higher priority suit trumps all the other suits, and wins.

There are essentially 4 levels of specificity, or priorities, in determining which property will be used when there is a conflict, and since most developers use more than one CSS file for a single page, believe me, you will have conflicts.  The four levels, in order of highest priority to lowest, are: inline, ids, classes, and element tags.

If you have two different selectors that reference the same part of your HTML page, the higher level priority wins. If they both have the same level of priority, two ids for example, the last one in the list wins, thus the cascade name in CSS. That's it.

Not quite, let's talk more about using these selectors to minimize your problems in using CSS.

First off, there is a super trump tag that you can use, the !important tag.  It's not technically a selector, and it is only used with individual CSS properties, like so:

color: blue !important;
font-size: 0.6em !important;
margin-top: 5px;

If it's used, it trumps all other properties for that particular property.  CSS will use this property on the page when rendered.  Your footer in the above example will be blue with a font-size of 0.6em.

Having said that, it is a matter of pride to me, and a sign of a good CSS development, never to use the !important tag, huh?  If you use it too much you could run into conflicts where CSS will decide, with the cascade, about which !important tag is more important, and that will really confuse you.  If you want to get good with CSS, do yourself a favor, and forget about using the !important tag.  Of course, there's always that one time, where you just can't seem to make it work...only kidding.

Most people don't know that inline styles are higher in priority than the id or class selector.  Inline styles are used with the HTML span tag like so:

The quick brown fox jumped over the lazy dog.

If I had a CSS file with the following entry, what color will "jumped" be in the above web page?

#foxy {color: red;}

Yes, green with an 40% larger font, because the inline style trumps the "foxy" id selector.

Now, to the interesting tags, and the reason for this article, id's and classes. Yes, id's beat classes. Every id in the web page should be unique and only used once. You should use classes when you want to have the same properties affect multiple areas, or selectors, on the web page.

That doesn't mean the same id can't be used on every page, and often is. A good example is the use of id's to break up the page.  Most developers use a header, footer, navigation, sidebar, and main content id on all their pages.  Then they can include the same style sheet file in every web page and have the header, or footer, for example, have the same styling on every page.

My vote is to take a slightly different approach. I'd like to suggest you make these classes instead of id's.  For example:

Copyright 2010

Why?  More control.  You give yourself an extra layer of uniqueness control when you really need to adjust your styling.  Suppose you had more than one type of header for your web site, but every header is located in the same location on every web page, and you want to style that location.

If you use the class "header" for all your pages, you only need to style the location once, but now on pages where you want to make the header different, you can have another class along with the original header class, or a unique id for just that one unique header page. Your not assigning a unique id name for each type of header, and having to remember which one is which in your css file. I, also, don't have to duplicate the location styling for each id.

When you need to adjust one thing on one page, you can assign it a higher priority id along with the class.  You won't have to worry about competing id's, which is the cause of most styling conflicts, and you'll end up with a lot less head scratching, trying to figure out why your styling isn't working.

Comments are closed.