#Intro or .Intro?

[shapper]

Hello,

When styling a DIV as follows:

<div id="intro" class="Intro">Some intro text</div>

Should I use a class:
..Intro {...}

Or:
#Intro {...}

As far as I know if this div is unique I should use #Intro, if their
styles are not unique I should use .Intro.

But I read somewhere that I should use always .Intro and not
#Intro ...

Just checking.

Thanks,
Miguel

[Andy Dingley]

On 2 Jun, 13:36, shapper <[e-mail]:

<div id="intro" class="Intro">Some intro text</div>

Should I use a class:
.Intro {...}

Or:
#Intro {...}

Select on the class. (Fairly) commonly discussed issue in this ng.

This doesn't affect the HTML though, it's quite reasonable to use both
in the document markup.

[Jim Moe]

On 06/02/08 05:36 am, shapper wrote:

>
<div id="intro" class="Intro">Some intro text</div>

Should I use a class:
.Intro {...}

Or:
#Intro {...}

The advantage of #Intro:
- It can be linked as fragment <a href="#Intro">.
- Javascript can find it with DOM

Disadvantage:
- Must be unique

In general I prefer using a class unless one of the advantages for an ID
are compelling.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Harlan Messinger]

Jim Moe wrote:

On 06/02/08 05:36 am, shapper wrote:

><div id="intro" class="Intro">Some intro text</div>

Should I use a class:
.Intro {...}

Or:
#Intro {...}

If you have id="intro" as above, #Intro won't match it. IDs and class
names are case-sensitive.

The advantage of #Intro:
- It can be linked as fragment <a href="#Intro">.
- Javascript can find it with DOM

- Its specificity in the CSS cascade is higher than that of .Intro.

[Jeff]

Andy Dingley wrote:

On 2 Jun, 13:36, shapper <[e-mail]:

><div id="intro" class="Intro">Some intro text</div>

Should I use a class:
.Intro {...}

Or:
#Intro {...}

Select on the class. (Fairly) commonly discussed issue in this ng.

This doesn't affect the HTML though, it's quite reasonable to use both
in the document markup.

Is that really the consensus here?

I don't see any hard and fast rules for naming conventions (aside
from only one ID per page).

I like to name these things to increase readability. If I assign an
ID to something, I know that it is a section of the page. Classes I
reserve for presentation issues. Others are more comfortable with
everything as a class.

I'm happiest with stylesheets that have almost no classes, with nearly
everything styled as a descendant of a section.

Jeff

[Roderik]

shapper schreef:

Hello,

When styling a DIV as follows:

<div id="intro" class="Intro">Some intro text</div>

Should I use a class:
..Intro {...}

Or:
#Intro {...}

As far as I know if this div is unique I should use #Intro, if their
styles are not unique I should use .Intro.

But I read somewhere that I should use always .Intro and not
#Intro ...

Just checking.

Thanks,
Miguel

I would say .intro to say: this is of that type (it is an introduction)
And use #intro to say: this is that element (it is the introduction).

So for styling... it the depends a bit on how you look at it. It might
be unique in this case but you merely say it is of type intro. Therefore
I would prefer the class .intro in this case.

Sometimes I use both and then I use #intro for the positioning and
..intro for the styling. But that might be unneccesary overhead.

[dorayme]

In article <2u******************************@giganews.com>,
Jim Moe <jm***************@sohnen-moe.comwrote:

On 06/02/08 05:36 am, shapper wrote:

<div id="intro" class="Intro">Some intro text</div>

Should I use a class:
.Intro {...}

Or:
#Intro {...}

The advantage of #Intro:
- It can be linked as fragment <a href="#Intro">.
- Javascript can find it with DOM

Disadvantage:
- Must be unique

Yes, good. I would add an extra advantage to using an id when the author
is consciously meaning to only have one reference per page. It helps the
author keep better track of what he is doing, it is information for him.

--
dorayme