still confused on Classes and IDs

[bulge]

I have read for days on classes and IDs and the difference between
them, but I have yet to read a clear answer that explains it to me
properly. I think I need some sort of demo?

Lately I have been looking at a lot of CSS-rollover horizontal
navbars, and they are all using IDs, throwing me into a further state
of confusion.

Can someone give me a good reason why IDs are used so often in navbars
(as opposed to classes)? They say to limit the use of IDs, so why are
these people using them? Can't the same be accomplished with classes?
I just don't get it.

I have been looking at:
http://css.maxdesign.com.au/listamatic2/horizontal04.htm
and other examples on that site and I'm still scratching my head.

 

[Mark Parnell]

I have read for days on classes and IDs and the difference between
them, but I have yet to read a clear answer that explains it to me
properly. I think I need some sort of demo?

IDs have to be unique within a page. Classes don't. IDs can be useful
because they can also be used as link targets, e.g. <a
href="page.html#id">

Can someone give me a good reason why IDs are used so often in navbars
(as opposed to classes)?
No.

Can't the same be accomplished with classes?
Yes.

I just don't get it.

They are doing it on purpose to try and confuse you.

 

[brucie]

in post: <

I have read for days on classes and IDs and the difference between
them, but I have yet to read a clear answer that explains it to me
properly.

the specs are clear on what the differences are
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

 

[bulge]

in post: <

the specs are clear on what the differences are
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

unfortunately, language like:
"By setting the id attribute for this example, we can (1) create a
hyperlink to it and (2) override class style information with instance
style information."

...was not clear enough to me.

I need something more solid to be pounded into my head.
From what I gather, IDs can be used to override some parts of classes.
That's all that has vaguely sunk into my head. And I have yet to know
why I should go with a class or ID when creating something, because
the benefits of the ID isn't quite clear to me.

sort of related:
I just downloaded Style Master 3.5.2 demo yesterday. Anyway, being the
newbie I am, I went through the navbar wizard creation thing on it, so
I could examine the code and learn more about how they're done. The
navbars ended up being created with IDs. I still dunno why that's
done. I may be extremely thick here, but the w3c specs and various
other online tutorials don't make that any clearer to me.

 

[bulge]

They are doing it on purpose to try and confuse you.

They are doing a damn fine job!

 

[brucie]

in post: <

unfortunately, language like:
"By setting the id attribute for this example, we can (1) create a
hyperlink to it

12.2.3 Anchors with the id attribute
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3

and (2) override class style information with instance
style information."

..was not clear enough to me.

the id can contain css properties that will override the properties in
the .class.

And I have yet to know why I should go with a class or ID when
creating something, because the benefits of the ID isn't quite clear
to me.

ID:
1. As a style sheet selector.
2. As a target anchor for hypertext links.
3. As a means to reference a particular element from a script.
4. As the name of a declared OBJECT element.
5. For general purpose processing by user agents (e.g. for identifying
fields when extracting data from HTML pages into a database, translating
HTML documents into other formats, etc.).

I just downloaded Style Master 3.5.2 demo yesterday.

i recommend a plain text editor for html and css

I went through the navbar wizard creation thing on it, so I could
examine the code and learn more about how they're done. The navbars
ended up being created with IDs. I still dunno why that's done.

my crystal ball says its because of number 3 above or because the
elements are unique so don't need a class.

I may be extremely thick here,

i don't think so, i can clearly see through one ear and out the other

but the w3c specs

it takes a while to be able to read and understand the w3c specs. its
done deliberately so the common riffraff don't realize how easy it is
and start thinking anyone can do it.

and various other online tutorials don't make that any clearer to me.

thats why you paid your membership fees to alt.html. you did pay didn't
you?

next!

 

[Dave Patton]

I need something more solid to be pounded into my head.

Does this help?
http://www.w3schools.com/css/css_syntax.asp

A simple overview:
- put styles in an external stylesheet, not inline
- don't use class or id if you don't need to, and
can use CSS selectors
- use id if there will every only be one instance
of the associated HTML element on a page
- use class if you have one class of elements on
a page(e.g. some paragraphs, all with class="section",
so you can style those paragraphs differently)
- always end each property/value pair with a ";",
so their example of:
p
{
text-align: center;
color: black;
font-family: arial
}
should be:
p
{
text-align: center;
color: black;
font-family: arial;
}

 

[bulge]

yep, thanks guys. I think I really need to take some time to soak it
in...

Altho reading this stuff again just brings back memories of going
round in circles, I'll try to make sense of the pieces.

I am a simple man (!) with simple uses. I simply want to start
creating sites entirely in CSS, dispensing with tables, and this ID
business has me kinda confused. Especially seeing IDs in so many
recent navigation bar CSS examples. Kinda makes me feel I'm missing
out on something, but I'm not sure what (for my uses), for IDs to be
used so often in those examples where classes would seem to otherwise
do.

None of the other benefits of IDs (being referenced in/from scripts,
target anchors, and others that sort of go over my head) really has
any appeal to me, since I don't know or don't use anything in those
departments. Also, IDs being used only once for 'unique' elements
seems like a bit of a waste, since I can just write another class,
even if the item is unique, without the limitations of IDs, it seems.

I think with enough playing around with these things a bulb might go
off in my head and IDs will start making 'sense' to me, and I may even
*gasp* start using them in certain situations where I deem them to be
useful. For my uses, right now, that switch is not turning on and they
seem to be superfluous to me.

I'll continue reading and report on any breakthroughs in the grey
matter department...

If somebody can come up with some sort of limitation with using
classes (instead of IDs) for my example of a simple rollover
horizontal navigation bar, I'm all ears. I am not into the fancypants
ID stage yet, so I dunno if I can or will ever benefit from what they
bring to the table (for my simple uses).

 

[Andy Dingley]

I have read for days on classes and IDs and the difference between
them, but I have yet to read a clear answer that explains it to me
properly.

Use class for CSS, id for DHTML (client-side JavaScript).
This is a gross simplification, but it's a reasonable empirical guide.
You can use either for either, but just do it this way _unless_ you
find a clear reason not to.

The core difference is that you can use class many times on a page,
but id must be unique. Each one has some level of implied semantic
meaning (_why_ you're using it), so that if you think about this and
think about whether that concept _can_ be duplicated on a page, then
that makes it clear.

NB - the question is whether it _can_ be duplicated, not whether it
happens to be duplicated for that one instance of a page. Some pages
may have one box called "special offer", other might have two. As for
simple organisation of your CSS you have to think at the site level,
not individual pages, so try to make something that works across all
the likely variants.


If in doubt (for CSS work), use class - you'll usually be right and
you'll rarely be wrong (i.e. actually invalid).


Here's a menu as an example:

<menu
id="menu-side-chapter-navigation"
class="menu-side"
title="Chapter navigation menu" >

<li><a href="foo.htm" >Foo</a></li>
<li><a href="bar.htm" >Bar</a></li>
<li class="current" ><a href="bat.htm" >Bat</a></li>

Home</a></li>

</menu>


A couple of notes:

- All the CSS is driven by classes, not id.

- There's a class applied to the overall menu, and then the <li> and
<a> elements don't need their own. This is enough to make CSS
rollovers work.

- If there's an <li> that should be presented differently (e.g.
"site-nav" here for meaning "navigate out of the current area") then
you can give that handful of entries their own class.

- "Current" is a class, not an id. It could be an id (there's only
one menu entry that will be current), except that there's no _need_
for it to be an id. There's also a chance that the menu will be
duplicated as a page footer too. This way I can use the same class
value on both menus, and probably set text colour etc. identically for
the two menus, just from one CSS rule.

- There's an id for the overall menu, but not for menu entries. If I
wanted to add DHTML event handlers to them, then I'd use the
..srcElement property, not a hard-coded id value.

- The main reason against using an id value for "current" is that I
might choose to have id values for the elements after all. I couldn't
then generate simple "mnu-side-foo, mnu-side-bar" values for them, if
one needed to be a special value for current.

 

[Steve Pugh]

I have read for days on classes and IDs and the difference between
them, but I have yet to read a clear answer that explains it to me
properly. I think I need some sort of demo?

Classes are used for classifying elements, ids are used for uniquely
identifying a single element.

In CSS terms an id has greater specificity than a class, so
p#foo will over ride p.bar.

IDs also have uses outside of CSS. IDs can be used as anchors for
links and to associate two elements with each other (e.g. <label
for="foo"> associated with <input id="foo">). IDs are also used to
identify an element so that it can be manipulated with scripting
languages.

Lately I have been looking at a lot of CSS-rollover horizontal
navbars, and they are all using IDs, throwing me into a further state
of confusion.

If you want to extend a pure CSS rollover to work in Internet Explorer
then you may well need to add JavaScript (as IE only supports :hover
on <a> elements) and accessing an element via its ID is often easier
than accessing it via its class.

How many navbars do you have on your page? Normally it's only one so
id is perfectly suitable as it uniquely identifies a single page
element.

Can someone give me a good reason why IDs are used so often in navbars
(as opposed to classes)?

Not really.

They say to limit the use of IDs,

Who says that?

Can't the same be accomplished with classes?

Sometimes yes, sometimes no. Depends on what you're doing.

I have been looking at:
http://css.maxdesign.com.au/listamatic2/horizontal04.htm
and other examples on that site and I'm still scratching my head.

In that case you would want to use classes if you had submenus on more
than one link. That doesn't look like a particularly good example.

Steve

 

[Sam Hughes]

- always end each property/value pair with a ";",
so their example of:
p
{
text-align: center;
color: black;
font-family: arial
}
should be:
p
{
text-align: center;
color: black;
font-family: arial;
}

However, a semicolon is not necessary for the last attribute:value pair;
it gets implied when the closing brace is found. Their example is
syntactically correct.

 

[Jeff Thies]

yep, thanks guys. I think I really need to take some time to soak it
in...

Altho reading this stuff again just brings back memories of going
round in circles, I'll try to make sense of the pieces.

I am a simple man (!) with simple uses. I simply want to start
creating sites entirely in CSS, dispensing with tables, and this ID
business has me kinda confused. Especially seeing IDs in so many
recent navigation bar CSS examples.

ID's can make your stylesheet more readable. Many authors break down the
structure of their page into sections. Say, navigation, content, footer,
.... and then assign an ID to each section, typically in a div

The stylesheet would then look like

#content h1{...
#content p{...
#content a.some_class{...

#navigation ul{...

The same can be done with classes, but the ID's make it obvious that you
are dealing with a *unique* section of the site.

Experienced authors will use as few classnames as possible. Classname
soup can be as bad as tag soup for maintainability.

Now as far as dynamic menuing goes, you may find ID's there for a
different reason:

<ul>
<li id="item1">1</li>
<li id="item2">2</li>
....

Lets say we wanted to do something with the li of id="item1";

var element_ref=document.getElementById("item1"); // we have that element

element_ref.innerHTML='I'm now 1A'; // non DOM but highly used method of
retrieving/setting the content of that element

If those were classnames, than there would be ambiguity in which element
was referred to as the DOM method of retrieving elements by classname
retrieves a list.

Jeff

 

[Dave Patton]

However, a semicolon is not necessary for the last attribute:value pair;
it gets implied when the closing brace is found. Their example is
syntactically correct.

Yes, but it's good practice to include it. Helps stop
problems when someone adds another attribute:value pair
at the end of the list and forgets to terminate what used
to be the last pair with a ";".
Given the OP was a newbie, I figured it was good advice

 

[rf]

Jeff Thies

ID's can make your stylesheet more readable. Many authors break down the
structure of their page into sections. Say, navigation, content, footer,
... and then assign an ID to each section, typically in a div

The stylesheet would then look like

#content h1{...
#content p{...
#content a.some_class{...

#navigation ul{...

The same can be done with classes, but the ID's make it obvious that you
are dealing with a *unique* section of the site.

Which is why these authors style sheets tend to be pages and pages long,
with a rule for each and every element in the HTML.

Experienced authors will use as few classnames as possible.

Wrong. Very wrong.

I for one *never* use ID selectors.

Classname
soup can be as bad as tag soup for maintainability.

You miss the point. A class selector may select any number of elements. An
ID selector may only select one.

 

[Jeff Thies]

Jeff Thies




Which is why these authors style sheets tend to be pages and pages long,
with a rule for each and every element in the HTML.

I'm thinking that you are missing the point. The typical page has 5 or 6
sections at most. That's 5 or 6 ID's at most.

Wrong. Very wrong.

Really? I would have thought that you would have preferred styling
individual elements as descendants in these sections rather than
assigning classnames to everything that needs styled.

I for one *never* use ID selectors.

So, you don't have to use them. I still say it is more readable to have
sections styled as ID's with elements styled as descendants.

Looking through the last complex heavily styled site I've done (mixed
shopping/ information/sidebars, etc...),has 7 ID's and 9 classnames
sitewide. That's a bit more of each than I normally use.

I used to do it your way, I switched.

You miss the point. A class selector may select any number of elements. An
ID selector may only select one.

Of course, but how many, for example, footers does a page have?

Assign it a classname if you wish, but it *is* easier to pick it out as
a section if it looks different. Looking through my stylesheets it's
trivial to pick out the sections, just look for the lines that start
with a #. If everything is a class, much harder.

And I still say the less classnames and ID's for that matter, the
better. Descendants are where it's at.

Jeff

 

[Sam Hughes]

Experienced authors will use as few classnames as possible. Classname
soup can be as bad as tag soup for maintainability.

However, the use of classes can make CSS much more efficient. Remember
that multiple class names can go into one class attribute, separated by a
space. Many times that can help mix and match styles.

The only instances in which I use IDs for CSS is when I feel like getting
cute about it.

 

[Jeff Thies]

@newsread2.news.atl.earthlink.net:




However, the use of classes can make CSS much more efficient.

More efficient than what? Nobody has ever suggested giving everything an ID!

Remember
that multiple class names can go into one class attribute, separated by a
space. Many times that can help mix and match styles.

Sure, but whether that increases readability is dependant on useage.

The only instances in which I use IDs for CSS is when I feel like getting
cute about it.

Remember we are talking about about readability/maintainability, not
about using ID's where a classname is more suited. Reread what I wrote.

You know that most wysiwyg editors encourage authors to add
classnames whenever they want *anything* styled. That leads to a loss of
readability in your stylesheet and a loss of structure. You have a
stylesheet full of classnames and where is *that* classname in the HTML?
You get to the point where you keep adding classnames, isn't it much
easier just to add the proper decendant to your stylesheet rather than
alter the HTML adding extra classnames?

All I've said all along is that styling with decendants (or child) makes
a more structured and readable stylesheet. If that parent is unique (the
footer example again) then why not make it an ID? That was and remains
my original point!


Jeff

 

[Sam Hughes]

[snip...]

Remember
that multiple class names can go into one class attribute, separated
by a space. Many times that can help mix and match styles.

Sure, but whether that increases readability is dependant on useage.

If there are readability improvements that I have not noticed with my own
IDs, they are very small. However, you never know when you might want
another element to have that "footer" style, or perhaps all of its rules
except the color, which can be overridden by giving the element two
classes.

The only instances in which I use IDs for CSS is when I feel like
getting cute about it.

[... snippage]

All I've said all along is that styling with decendants (or child)
makes a more structured and readable stylesheet. If that parent is
unique (the footer example again) then why not make it an ID? That was
and remains my original point!

But making it an id does not make it inherently better.

Readability does not affect maintainability that much, especially when I
don't see much improvement. If you use classes instead of ids, that's
when maintainability improves. What if you discover later on that you
want one area of your page to borrow all of another element's styles, but
the element uses an id? Or all of the styles but one? You'd have two
choices: be redundant in the style sheet, or go through every document
and change id="blegh" to class="blegh". But if you already used a class,
you wouldn't have that problem. By using IDs, you're expressing your
confidence in the present state of affairs on your website remaining as-
is by purposefully removing maintainability. You might only have one
footer now, but what if you later want something styled the same way?

By the way, I do the same thing.

 

[Jeff Thies]

Readability does not affect maintainability that much, especially when I
don't see much improvement.

Does for me. There's usually a period where the client will request
minor changes and finding the right property quickly helps a lot. I can
usually do that in real time.

YMMV.


If you use classes instead of ids, that's

when maintainability improves. What if you discover later on that you
want one area of your page to borrow all of another element's styles, but
the element uses an id?

You know, that has never happened. It sounds like a good idea but I've
never had it come up in practice. The cart basket, product display,
schedule, side navigation, footer etc never resemble each other. I only
use ID's for high level concepts like major page sections, never in
parts of those sections.

I generally set as many styles globally as possible and only style the
differences. That gives you a consistancy which is certainly important.

Or all of the styles but one? You'd have two

choices: be redundant in the style sheet, or go through every document
and change id="blegh" to class="blegh". But if you already used a class,
you wouldn't have that problem. By using IDs, you're expressing your
confidence in the present state of affairs on your website remaining as-
is by purposefully removing maintainability.

Actually all the sites I work on use one or two templates (often only
one). Everything is content managed and by changing the template I can
change all the static as well as server pages. I've had to tinker with
the HTML and occaisionally add a classname but I've never had to change
anything that was already set.

Writing stylesheets and writing HTML is a developed art that goes hand
in hand. I'd say we evolve styles of writing.

Cheers,
Jeff


You might only have one