471,092 Members | 978 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,092 software developers and data experts.

#Intro or .Intro?

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
Jun 27 '08 #1
6 4197
On 2 Jun, 13:36, shapper <mdmo...@gmail.comwrote:
<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.
Jun 27 '08 #2
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)
Jun 27 '08 #3
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.
Jun 27 '08 #4
Andy Dingley wrote:
On 2 Jun, 13:36, shapper <mdmo...@gmail.comwrote:
><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
Jun 27 '08 #5
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.
Jun 27 '08 #6
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
Jun 27 '08 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Kamus of Kadizhar | last post: by
2 posts views Thread by Chad | last post: by
3 posts views Thread by Guy Middleton | last post: by
7 posts views Thread by TechBookReport | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.