[WSG] Contextual selectors or class attribute in tag
Hi,
I'm putting together a site at the moment and I'm trying to work out the
best way of applying styles to various content. The site is split by divs in
typical fashion: #header, #nav, #content etc. Each of these sections use
lists in various ways, the #header has one list laid out horizontally as a
menu, the #nav has the same although laid out vertically, the #content uses
lists in the standard fashion albeit with a custom bullet image. My initial
thoughts were that each section uses lists in such different ways that the
most appropriate way of defining those lists was using contextual selectors,
e.g.:
#header ul { /* styles */ }
#header ul li { /* styles */ }
you get the jist. But then I start to think about what happens if
for some reason, the designers decide to add another list in the #nav
section which is considerably different in style to the first one. The
styles for this second list in #nav are so different that I find myself
over-riding practically all the styles defined for ul and li in the
contextual selectors. Would it not be better then to specify a class name
within the ul tag rather than using a contextual selector in case the new
list is required? Or is this where the initial analysis of the visuals come
in? I would say that there is next to no chance in reality that another
wildly different list would be required in #nav in which case the contextual
selectors would seem to be the best optionwould you agree?
On this same site I also have images with an annotation below them (I'll
refer to them as a 'widget' for this example). These exist in the #nav and
the #content sections. They are really quite similar, except in the #nav the
annotation has a red background and in the #content they have blue
background. So again I think contextual selectors:
#nav .widget { background-color: red; }
#content .widget { background-color: blue; }
And then again I start thinking about whether or not at some point in the
future the designers may well decide to mix the colors within each section,
i.e. have an annotation with a blue background followed by another one in
the same section with a red background. This is a more likely scenario than
the list situation above. In this case I start thinking that it's best to
use multiple class selectors and lose the contextual selectors, e.g.:
.widget.powerful { background-color: red; }
.widget.gentle { background-color: blue; }
Then I need to control the position of the annotaion (it can go below or
above image) in which I case need to add:
.widget.above.powerful { background:
url(images/red_top_gradient.gif) top no-repeat; }
.widget.above.gentle { background: url(images/blue_top_gradient.gif)
top no-repeat; }
.widget.below.powerful { background:
url(images/red_bottom_gradient.gif) bottom no-repeat; }
.widget.below.gentle { background:
url(images/blue_bottom_gradient.gif) bottom no-repeat; }
Of course IE chokes on this meaning I have to create multiple similar
classes resulting in loads more code and plenty of duplication which gets me
annoyed and frustrated resulting in my seeking out you guys!
I guess to summarise, I'm asking how you decide on when to use contextual
selectors and when to add the class attribute to a tag?
I'd really appreciate your thoughts. Sorry if I've not been too clear.
Many thanks,
James.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Contextual selectors or class attribute in tag
Hi James,
I find that if you are getting conflicts (or potential conflicts) like that
then you are not being specific enough with your #id's. In this case I could
keep the #nav div but add ul#mainnav to the that contains the main
navigation, then if you have to add another list it can either have no idea
(and inherit the default #nav ul styles if specified) or give it its own id
again, e.g. ul#secondnav.
It is hard to predict how specific you are going to need to be when you're
building the site however, too specific and you negate the benefits of using
CSS, too general and your styles become a mess of overriding rules.
Samuel
-Original Message-
From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED]
On Behalf Of James Thomson
Sent: Monday, 7 August 2006 7:47 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] Contextual selectors or class attribute in tag
Hi,
I'm putting together a site at the moment and I'm trying to work out the
best way of applying styles to various content. The site is split by divs in
typical fashion: #header, #nav, #content etc. Each of these sections use
lists in various ways, the #header has one list laid out horizontally as a
menu, the #nav has the same although laid out vertically, the #content uses
lists in the standard fashion albeit with a custom bullet image. My initial
thoughts were that each section uses lists in such different ways that the
most appropriate way of defining those lists was using contextual selectors,
e.g.:
#header ul { /* styles */ }
#header ul li { /* styles */ }
you get the jist. But then I start to think about what happens if
for some reason, the designers decide to add another list in the #nav
section which is considerably different in style to the first one. The
styles for this second list in #nav are so different that I find myself
over-riding practically all the styles defined for ul and li in the
contextual selectors. Would it not be better then to specify a class name
within the ul tag rather than using a contextual selector in case the new
list is required? Or is this where the initial analysis of the visuals come
in? I would say that there is next to no chance in reality that another
wildly different list would be required in #nav in which case the contextual
selectors would seem to be the best optionwould you agree?
On this same site I also have images with an annotation below them (I'll
refer to them as a 'widget' for this example). These exist in the #nav and
the #content sections. They are really quite similar, except in the #nav the
annotation has a red background and in the #content they have blue
background. So again I think contextual selectors:
#nav .widget { background-color: red; }
#content .widget { background-color: blue; }
And then again I start thinking about whether or not at some point in the
future the designers may well decide to mix the colors within each section,
i.e. have an annotation with a blue background followed by another one in
the same section with a red background. This is a more likely scenario than
the list situation above. In this case I start thinking that it's best to
use multiple class selectors and lose the contextual selectors, e.g.:
.widget.powerful { background-color: red; }
.widget.gentle { background-color: blue; }
Then I need to control the position of the annotaion (it can go below or
above image) in which I case need to add:
.widget.above.powerful { background:
url(images/red_top_gradient.gif) top no-repeat; }
.widget.above.gentle { background: url(images/blue_top_gradient.gif)
top no-repeat; }
.widget.below.powerful { background:
url(images/red_bottom_gradient.gif) bottom no-repeat; }
.widget.below.gentle { background:
url(images/blue_bottom_gradient.gif) bottom no-repeat; }
Of course IE chokes on this meaning I have to create multiple similar
classes resulting in loads more code and plenty of duplication which gets me
annoyed and frustrated resulting in my seeking out you guys!
I guess to summarise, I'm asking how you decide on when to use contextual
selectors and when to add the class attribute to a tag?
I'd really appreciate your thoughts. Sorry if I've not been too clear.
Many thanks,
James.
**
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
**
Re: [WSG] Contextual selectors or class attribute in tag
On Sunday 06 August 2006 23:47, James Thomson wrote:
> Hi,
>
> I'm putting together a site at the moment and I'm trying to work out the
> best way of applying styles to various content. The site is split by divs
> in typical fashion: #header, #nav, #content etc. Each of these sections use
> lists in various ways, the #header has one list laid out horizontally as a
> menu, the #nav has the same although laid out vertically, the #content uses
> lists in the standard fashion albeit with a custom bullet image. My initial
> thoughts were that each section uses lists in such different ways that the
> most appropriate way of defining those lists was using contextual
> selectors, e.g.:
>
> #header ul { /* styles */ }
> #header ul li { /* styles */ }
>
> you get the jist. But then I start to think about what happens if
> for some reason, the designers decide to add another list in the #nav
> section which is considerably different in style to the first one. The
> styles for this second list in #nav are so different that I find myself
> over-riding practically all the styles defined for ul and li in the
> contextual selectors. Would it not be better then to specify a class name
> within the ul tag rather than using a contextual selector in case the new
> list is required? Or is this where the initial analysis of the visuals come
> in? I would say that there is next to no chance in reality that another
> wildly different list would be required in #nav in which case the
> contextual selectors would seem to be the best optionwould you
> agree?
>
I suppose while I'm giving comments that lists are the appropriate markups in
your design. If there is next to no chance that another list would be
required for #nav and your #nav content is given by a dynamic way (include,
templates, echo, print, etc...), contextual selectors without class names are
useful in the case you're describing. Then you can easily add or remove class
names in your stylesheets if need be.
> On this same site I also have images with an annotation below them (I'll
> refer to them as a 'widget' for this example). These exist in the #nav and
> the #content sections. They are really quite similar, except in the #nav
> the annotation has a red background and in the #content they have blue
> background. So again I think contextual selectors:
>
> #nav .widget { background-color: red; }
> #content .widget { background-color: blue; }
>
You can use css shortcuts :
#nav .widget {background:#f00;}
#nav .widget {background:#00f;}
> And then again I start thinking about whether or not at some point in the
> future the designers may well decide to mix the colors within each section,
> i.e. have an annotation with a blue background followed by another one in
> the same section with a red background. This is a more likely scenario than
> the list situation above. In this case I start thinking that it's best to
> use multiple class selectors and lose the contextual selectors, e.g.:
>
> .widget.powerful { background-color: red; }
> .widget.gentle { background-color: blue; }
>
> Then I need to control the position of the annotaion (it can go below or
> above image) in which I case need to add:
>
> .widget.above.powerful { background:
> url(images/red_top_gradient.gif) top no-repeat; }
> .widget.above.gentle { background: url(images/blue_top_gradient.gif)
> top no-repeat; }
> .widget.below.powerful { background:
> url(images/red_bottom_gradient.gif) bottom no-repeat; }
> .widget.below.gentle { background:
> url(images/blue_bottom_gradient.gif) bottom no-repeat; }
>
> Of course IE chokes on this meaning I have to create multiple similar
> classes resulting in loads more code and plenty of duplication which gets
> me annoyed and frustrated resulting in my seeking out you guys!
>
Don't name your class as 'above'. You will lost in your stylesheet when
the .above class name will have a lower position background ;)
I'm not shure to understand the whole, but my intuitive mind would tell you
there are too much selectors for a typical design. I would suggest you to
search for an other simpler markup technic.
> I guess to summarise, I'm asking how you decide on when to use contextual
> selectors and when to add the class attribute to a tag?
>
> I'd really appreciate your thoughts. Sorry if I've not been too clear.
>
> Many thanks,
>
> James.
>
>
>
> **
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> **
I think I answer your question : for me it's just the 'feeling'. I'm curious
to listen to other opinions.
Regards,
--
Pierre-Henri Lavigne
[EMAIL PROTECTED]
Tel: +33 (0)6.18.75.32.67
**
The discussion list for http
Re: [WSG] Contextual selectors or class attribute in tag
On 7 Aug 2006, at 7:47 AM, James Thomson wrote:
Hi,
I'm putting together a site at the moment and I'm trying to work out
the
best way of applying styles to various content. The site is split by
divs in
typical fashion: #header, #nav, #content etc. Each of these sections
use
lists in various ways, the #header has one list laid out horizontally
as a
menu, the #nav has the same although laid out vertically, the #content
uses
lists in the standard fashion albeit with a custom bullet image. My
initial
thoughts were that each section uses lists in such different ways that
the
most appropriate way of defining those lists was using contextual
selectors,
e.g.:
#header ul { /* styles */ }
#header ul li { /* styles */ }
you get the jist. But then I start to think about what happens
if
for some reason, the designers decide to add another list in the #nav
section which is considerably different in style to the first one. The
styles for this second list in #nav are so different that I find myself
over-riding practically all the styles defined for ul and li in the
contextual selectors. Would it not be better then to specify a class
name
within the ul tag rather than using a contextual selector in case the
new
list is required? Or is this where the initial analysis of the visuals
come
in? I would say that there is next to no chance in reality that another
wildly different list would be required in #nav in which case the
contextual
selectors would seem to be the best optionwould you agree?
Basically, yes. *If* a second nav is deemed necessary, the simple
addition of a class to that ul is all that's needed to continue to use
descendant selectors:
#header #nav2 ul {...}
On this same site I also have images with an annotation below them
(I'll
refer to them as a 'widget' for this example). These exist in the #nav
and
the #content sections. They are really quite similar, except in the
#nav the
annotation has a red background and in the #content they have blue
background. So again I think contextual selectors:
#nav .widget { background-color: red; }
#content .widget { background-color: blue; }
And then again I start thinking about whether or not at some point in
the
future the designers may well decide to mix the colors within each
section,
i.e. have an annotation with a blue background followed by another one
in
the same section with a red background. This is a more likely scenario
than
the list situation above. In this case I start thinking that it's best
to
use multiple class selectors and lose the contextual selectors, e.g.:
.widget.powerful { background-color: red; }
.widget.gentle { background-color: blue; }
Hmm. I'd be interested to see how you have the HTML marked up for
these. These additional (?)subclasses are a slippery slope - as you see
below. Better to do this:
.widget, .powerful {...red}
.widget, .gentle {...blue}
with your HTML marked up as
Then I need to control the position of the annotaion (it can go below
or
above image) in which I case need to add:
.widget.above.powerful { background:
url(images/red_top_gradient.gif) top no-repeat; }
.widget.above.gentle { background: url(images/blue_top_gradient.gif)
top no-repeat; }
.widget.below.powerful { background:
url(images/red_bottom_gradient.gif) bottom no-repeat; }
.widget.below.gentle { background:
url(images/blue_bottom_gradient.gif) bottom no-repeat; }
Of course IE chokes on this meaning
Well, yes. See above... Suggest you also check out a good resource on
specificity; try these for starters:
- the horse's mouth
