I would go one step further.
Eric's CSS is obviously examined by thousands of eyes. Adding div#links
helps those unfamiliar with the code understand what is being styled. I'm
not saying he adds extra markup for people to learn from his code, but it is
a good practice when you are working in a team of developers. Especially
when you are the "expert" and the others are learning from your templates.
Possible downsides to this approach:
1. bloat. Your css files are obviously going to be bigger if you are adding
the extra text. This isn't a big deal for most sites.
2. Specificity. You may have an id or class that you use on different
containers. For instance a warning class could be applied to links, labels,
and paragraphs. Those may have different variations. You will NEED to have
the div, a, li, etc in front of the class to maintain this distinction. If
your CSS is peppered with these, it's not as easy to read.
For example .warning {color:red}
p.warning {text-align:right}
3. Specifisity part 2. div#links will over-write #links.
Lets say you define something in your global style sheet div#links
{text-align:center;}. In another style sheet, you define #links
{text-align:left}. You're gonna go crazy trying to figure out why they don't
go left until you go back to the more specific rule and fix it there.
I've actually used this to my advantage. I will define something like this
.bigolcontainer {background(biguglybackground.gif) repeat-y 0 0;...}
But on one page, I don't want that background. So it imports a new css file
for its modules and includes this rule.
div.bigolcontainer {background:none;}
This avoids using !important or worrying about which order the server will
load the css files.
Ted
www.last-child.com
-----Original Message-----
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of Lachlan Hunt
Sent: Tuesday, May 23, 2006 4:19 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] div#links, or #links?
Designer wrote:
> I've noticed before that Mr Meyer quite often uses stuff like:
>
> [1] div#links a:hover img {position: absolute; etc.
>
> whereas I would just say :
>
> [2] #links a:hover img {position: absolute; etc.
>
> I find myself being intrigued as to why he does this. Is there a reason?
There are several possible reasons:
1. Increase the specificity.
2. Differentiate between the id used on a div element and on, for
example, a ul element. (The same ID may be used on a different element
on a different page using the same stylesheet)
e.g. page 1 uses: <div id="links">
page 2 uses: <ul id="links">
(Just assume there would be a semantic reason for using a different
element on different pages)
3. It may just be an authoring convention.
--
Lachlan Hunt
http://lachy.id.au/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
