Re: [WSG] Classes---Adding multiple classes to an element, is there a downfall???
Is there a downfall to applying multiple classes to an element, like the one
> above? How does it affect UAs?
Just thought I'd offer an alternate viewpoint to the "argh! no!" responses
so far.
Like most web dev questions there's a contextual aspect to the question.
There's a time and a place to use multiple classes.
Multiple classes are hugely useful if you have a really large site (or
collection of sites) with design variations over a standard structure (i.e.
standardised markup). You can use multiple classes to build up layers of
style and save a lot of repetition.
eg.
.default { /* set up widths, sizing, etc */}
.variant1 { color: #000; background: #fff; }
.variant2 { color: #fff; background: #000; }
(obviously in a real build you'd do this with meaningful classnames)
Then you can have:
and
...and you've saved the hack work of setting up the basics twice. When you
have hundreds of different pages it's pretty powerful. The downside of the
approach is that you really do have to have standardised markup - not just
"similar" or "usually the same" but things actually have to follow a
standard.
For a smaller site with the current browser market it's probably overkill,
and for the scenario in the original question I think contextual selectors
are the way to go.
But we should keep in mind that the end of IE6 is in sight, at which point
combined selectors will work as they're supposed to. That will make multiple
classes more broadly useful - including being useful on small sites - as
there's the potential to do more style work with less elements.
So basically... don't be hating multiple classes, they have their place ;)
cheers,
Ben
--
---
Re: [WSG] Classes---Adding multiple classes to an element, is there a downfall???
Yea, I would never consider allowing it on any project I am working on
either...I was actually asking because I have heard that it could be done,
but never really understood (maybe, come to think of it, heard) what the
downfalls were. I do, now, thanks to you and Russ Weakley.
--
Brett P.
On Tue, Feb 24, 2009 at 5:17 AM, wrote:
> In my own personal opinion, if you get into the situation where you want
> to use a selector like:
>
> .class1.class2 { stuff }
>
> then it is time to do a little re-factoring. The whole point of allowing an
> element to have two or more classes is so that each class remains
> semantically logical. As you pointed out, it is legal to use a selector like
> the above, but I would never allow such code on any project I was working
> on. Worst case is you need to be more specific with your rules. Obviously,
> the cascade determines exactly which rule will win, but I would also be very
> wary of relying on source-order - it would be far too easy for you (or
> someone else) to decide to tidy up the stylesheet at some point and change
> the order of these two rules.
>
> Mike
>
>
> Mike Brockington
> Web Development Specialist
>
> www.calcResult.com
> www.stephanieBlakey.me.uk
> www.edinburgh.gov.uk
>
> This message does not reflect the opinions of any entity other than the
> author alone.
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Classes---Adding multiple classes to an element, is there a downfall???
In my own personal opinion, if you get into the situation where you want
to use a selector like:
.class1.class2 { stuff }
then it is time to do a little re-factoring. The whole point of allowing
an element to have two or more classes is so that each class remains
semantically logical. As you pointed out, it is legal to use a selector
like the above, but I would never allow such code on any project I was
working on. Worst case is you need to be more specific with your rules.
Obviously, the cascade determines exactly which rule will win, but I
would also be very wary of relying on source-order - it would be far too
easy for you (or someone else) to decide to tidy up the stylesheet at
some point and change the order of these two rules.
Mike
Mike Brockington
Web Development Specialist
www.calcResult.com
www.stephanieBlakey.me.uk
www.edinburgh.gov.uk
This message does not reflect the opinions of any entity other than the
author alone.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Classes---Adding multiple classes to an element, is there a downfall???
Hey Brett,
There are many ways to do what you need - so you may not need to use a
multiple class selector at all.
OPTION 1
--
Using the html example you sent in a previous email, you could target
instances of content using descendant selectors based on the parent classes
alone - without the need for styling the "information" or "more-styles"
classes at all.
HTML:
Content goes here on line 1
Content goes here on line 2
CSS
.first-class p { background: #FCC; }
.second-class p { background: #AAC; }
OPTION 2
--
You could do the same with a combination of parent classes and the
"information" class:
.first-class p.information { background: #FCC; }
.second-class p.information { background: #AAC; }
OPTION 3
--
You could style just the two class instances alone (without the parent
classes):
p.information { background: #FCC; }
p.more-styles { background: #AAC; }
This would style any with a class of "information" with a background of
#FCC, and any with a class of " more-styles" with a background of #AAC.
If the has both classes, then "more-styles" would win (as it is written
after the other rule) and the background would be #AAC.
OPTION 4
--
Finally, you could use a multiple class selector for the second rule (though
this seems unnecessary, as you can see from the options above):
.information { background: #FCC; }
.information.more-styles { background: #AAC; }
One reason to avoid the multiple class selector (".information.more-styles")
is IE5's and IE6's lack of support.
I wrote an article on multiple classes some time ago, in case you want a
little more info:
http://www.maxdesign.com.au/presentation/multiple-classes/
HTH
Russ
on 24/2/09 4:29 AM, Brett Patterson at wrote:
> So, where:
>
>
> what I was wondering (I should have worded better, sorry) was if I took:
>
> .information
> {
> background-color: #FFF;
> color: #000;
> }
> /* This below, will apply only to the paragraph with the more-styles class
> applied to it */
> .more-styles
> {
> color: #333;
> }
>
> and applied to both of those paragraph (through the classes), which is the
> last paragraph. The first paragraph has only one class assigned to
> it...whereas, the last paragraph has 2 classes assigned: the first class
> assigned, i.e. information, contains the formatting (the formatting applied is
> the background-color, and the font's color (color)) that will apply to all the
> paragraphs with that class assigned to them (it); the last class assigned,
> i.e. more-styles, will change only the font's color in that particular
> paragraph...
>
> Is what the style you have applied, like if I had done this instead of what is
> applied at the top?:::
>
> .information.more-styles
> {
> styles: here;
> }
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Classes---Adding multiple classes to an element, is there a downfall???
So, where:
what I was wondering (I should have worded better, sorry) was if I took:
.information
{
background-color: #FFF;
color: #000;
}
/* This below, will apply only to the paragraph with the more-styles class
applied to it */
.more-styles
{
color: #333;
}
and applied to both of those paragraph (through the classes), which is the
last paragraph. The first paragraph has only one class assigned to
it...whereas, the last paragraph has 2 classes assigned: the first class
assigned, i.e. information, contains the formatting (the formatting applied
is the background-color, and the font's color (color)) that will apply to
all the paragraphs with that class assigned to them (it); the last class
assigned, i.e. more-styles, will change only the font's color in that
particular paragraph...
Is what the style you have applied, like if I had done this instead of what
is applied at the top?:::
.information.more-styles
{
styles: here;
}
--
Brett P.
On Mon, Feb 23, 2009 at 9:57 AM, Matthew Pennell
wrote:
> On Mon, Feb 23, 2009 at 2:18 PM, Brett Patterson <
> inspiron.patters...@gmail.com> wrote:
>
>> Note the space in the second paragraph class attribute...from what I have
>> heard this allows multiple classes to be applied to a single element. Is
>> there a downfall to applying multiple classes to an element, like the one
>> above? How does it affect UAs?
>
>
> There are no negative effects to applying multiple classes to a single
> element. The only problem is when you try to style an element that matches
> two (or more) classnames, e.g.:
>
> #content .primary.highlighted {
> background: #ff0;
> }
>
> That will work in Firefox/Safari, and apply the rule to any element with
> both the "primary" and "highlighted" classes; but in IE6 it doesn't work, it
> will just see it as .highlighted.
>
> - Matthew
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Classes---Adding multiple classes to an element, is there a downfall???
On Mon, Feb 23, 2009 at 2:18 PM, Brett Patterson <
inspiron.patters...@gmail.com> wrote:
> Note the space in the second paragraph class attribute...from what I have
> heard this allows multiple classes to be applied to a single element. Is
> there a downfall to applying multiple classes to an element, like the one
> above? How does it affect UAs?
There are no negative effects to applying multiple classes to a single
element. The only problem is when you try to style an element that matches
two (or more) classnames, e.g.:
#content .primary.highlighted {
background: #ff0;
}
That will work in Firefox/Safari, and apply the rule to any element with
both the "primary" and "highlighted" classes; but in IE6 it doesn't work, it
will just see it as .highlighted.
- Matthew
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
