css recursion

am 16.06.2007 08:23:09 von Jon Slaughter

Say I'm giving a hypothetical structure such as(in reality it would be more
complicated with arbitrary nestings)

Mike Jones - Subject

Jone Smoth - Subject2

Mike Jones - Subject2

Jeff - Subject3

Mike Applehaead - Subject is dead3

Cable - Subject is dead5

Is there a way to apply a style recursive to it to so that each div is given
the same style? What are the pro's and cons of inlining or using class=?

What I'm afraid of is that if I use some type of css recursion that it might
slow down the browser when it is applying the styles.

Any thoughts?

Thanks,
Jon

Re: css recursion

am 16.06.2007 09:22:33 von Adrienne Boswell

Gazing into my crystal ball I observed "Jon Slaughter"
writing in
news:hlLci.33393$Um6.5235@newssvr12.news.prodigy.net:

> Say I'm giving a hypothetical structure such as(in reality it would be
> more complicated with arbitrary nestings)
>
>

> Mike Jones - Subject
>

> Jone Smoth - Subject2
>

> Mike Jones - Subject2
>

> Jeff - Subject3
>

> Mike Applehaead - Subject is dead3
>

> Cable - Subject is dead5
>

>
>
> Is there a way to apply a style recursive to it to so that each div is
> given the same style?

div {background-color:#fff; color:#000} /* will style any div element */

What are the pro's and cons of inlining or using
> class=?

div.gray {background-color:#c0c0c0; color:#fff} /* will style any div
with the class gray */

This div is gray and
does not use an external stylesheet so is harder to maintain

>
> What I'm afraid of is that if I use some type of css recursion that it
> might slow down the browser when it is applying the styles.
>
> Any thoughts?
>

Your example above does not seem like it has semantic structure, it seems
like div soup. It looks like some hierachial structure, so might be more
suited to list markup and/or headings instead of nested divs.

Think about the structure of the page, and then style it accordingly.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Re: css recursion

am 16.06.2007 09:28:11 von dorayme

In article ,
"Jon Slaughter" wrote:

> Say I'm giving a hypothetical structure such as(in reality it would be more
> complicated with arbitrary nestings)
>
>

> Mike Jones - Subject
> ....
>
>
> Is there a way to apply a style recursive to it to so that each div is given
> the same style? What are the pro's and cons of inlining or using class=?
>
> What I'm afraid of is that if I use some type of css recursion that it might
> slow down the browser when it is applying the styles.
>
> Any thoughts?
>

Extraordinary thinking and speaking. "Hypothetical structure",
"in reality", arbitrary nestings", "a way to apply a style
recursive to it" (without it even being clear what the "it"
refers to)...

The pro of a class is that you state a rule once and it refers to
whatever falls under it in the html, the pro of an inline is that
it is easier if it is a one off for a particular bit in the html.

If you want all the divs to be be styled the same, you don't even
need to class anything. div {color: red;] will make all the text
in all the divs red unless you do something else to stop this. In
fact, if you want a whole lot of things in a div to be the same,
you do this and just class or inline the exceptions.

--
dorayme

Re: css recursion

am 16.06.2007 10:06:45 von Jon Slaughter

"dorayme" wrote in message
news:doraymeRidThis-430531.17281116062007@news-vip.optusnet. com.au...
> In article ,
> "Jon Slaughter" wrote:
>
>> Say I'm giving a hypothetical structure such as(in reality it would be
>> more
>> complicated with arbitrary nestings)
>>
>>

>> Mike Jones - Subject
>> ....
>>
>>
>> Is there a way to apply a style recursive to it to so that each div is
>> given
>> the same style? What are the pro's and cons of inlining or using class=?
>>
>> What I'm afraid of is that if I use some type of css recursion that it
>> might
>> slow down the browser when it is applying the styles.
>>
>> Any thoughts?
>>
>
> Extraordinary thinking and speaking. "Hypothetical structure",
> "in reality", arbitrary nestings", "a way to apply a style
> recursive to it" (without it even being clear what the "it"
> refers to)...
>

um... maybe you just don't understand those big words in context?

> The pro of a class is that you state a rule once and it refers to
> whatever falls under it in the html, the pro of an inline is that
> it is easier if it is a one off for a particular bit in the html.
>
> If you want all the divs to be be styled the same, you don't even
> need to class anything. div {color: red;] will make all the text
> in all the divs red unless you do something else to stop this. In
> fact, if you want a whole lot of things in a div to be the same,
> you do this and just class or inline the exceptions.
>

No, I need something similar but I need to use only the those divs in the
nesting

div[id="blah"] div
{

}

would probably work.

My question isn't about how to do it but the ramifications between the
different methods as far as efficiency goes.... something you didn't
address.

Re: css recursion

am 16.06.2007 10:08:15 von Jon Slaughter

"Adrienne Boswell" wrote in message
news:Xns99513D2E8BEBarbpenyahoocom@69.28.186.121...
> Gazing into my crystal ball I observed "Jon Slaughter"
> writing in
> news:hlLci.33393$Um6.5235@newssvr12.news.prodigy.net:
>
>> Say I'm giving a hypothetical structure such as(in reality it would be
>> more complicated with arbitrary nestings)
>>
>>

>> Mike Jones - Subject
>>

>> Jone Smoth - Subject2
>>

>> Mike Jones - Subject2
>>

>> Jeff - Subject3
>>

>> Mike Applehaead - Subject is dead3
>>

>> Cable - Subject is dead5
>>

>>
>>
>> Is there a way to apply a style recursive to it to so that each div is
>> given the same style?
>
> div {background-color:#fff; color:#000} /* will style any div element */
>
> What are the pro's and cons of inlining or using
>> class=?
>
> div.gray {background-color:#c0c0c0; color:#fff} /* will style any div
> with the class gray */
>
>

This div is gray and
> does not use an external stylesheet so is harder to maintain

>
>>
>> What I'm afraid of is that if I use some type of css recursion that it
>> might slow down the browser when it is applying the styles.
>>
>> Any thoughts?
>>
>
> Your example above does not seem like it has semantic structure, it seems
> like div soup. It looks like some hierachial structure, so might be more
> suited to list markup and/or headings instead of nested divs.
>

no semantic structure? Its a nested set of divs... thats the structure. You
are right about the hierarchial structure and I did think about lists and
maybe thats a better way to go but I feel that its probably equivilent to
the divs as I wouldn't really gain much advantage using them(except maybe
the automatic indention.

> Think about the structure of the page, and then style it accordingly.

huh?

Re: css recursion

am 16.06.2007 10:21:22 von Ben C

On 2007-06-16, Jon Slaughter wrote:
> Say I'm giving a hypothetical structure such as(in reality it would be more
> complicated with arbitrary nestings)
>
>

> Mike Jones - Subject
>

> Jone Smoth - Subject2
>

> Mike Jones - Subject2
>

> Jeff - Subject3
>

> Mike Applehaead - Subject is dead3
>

> Cable - Subject is dead5
>

>
>
> Is there a way to apply a style recursive to it to so that each div is given
> the same style?

div { ... }

or #pageComments div { ... }

> What are the pro's and cons of inlining or using class=?

A class is usually better than using inline style attributes since all
the properties go in one selector. Whether you need a class or just a
descendent selector depends on your application.

> What I'm afraid of is that if I use some type of css recursion that it might
> slow down the browser when it is applying the styles.

Most unlikely. You have to think this through: the browser is going to
have to do something with every

in your page anyway to work out
where to draw it on the screen. It's the least of its worries to add a
style from a simple selector like div { ... }.

There's no reason to assume it's programmed like this:

for each div
apply styles

for each div
do everything else

rather than like this:

for each div
apply styles
do everything else

and in any case there's not much reason why the former should be
significantly slower.

In fact using a selector rather than inline styles may be a tiny bit
faster because of the reduced amount of parsing.

A more complex selector like div td div { ... } will be slightly harder
to match since it's a little bit like an easy version of matching a
regular expression, but I wouldn't worry about it.

Re: css recursion

am 16.06.2007 11:19:05 von Shion

Ben C wrote:

> In fact using a selector rather than inline styles may be a tiny bit
> faster because of the reduced amount of parsing.
>
> A more complex selector like div td div { ... } will be slightly harder
> to match since it's a little bit like an easy version of matching a
> regular expression, but I wouldn't worry about it.

Sort of reminds me of a question I was thinking about recently.

Is 'optimisation' any valid reason to consciously limit the depth of
descendant selectors in CSS? For example, suppose I have a list of links
inside a #navbar div. To style the a elements in the navbar, I could do
this:

#navbar a { ... }

but I prefer to do this:

#navbar ul li a { ... }

just because I find the latter slightly more lucid when reading the
stylesheet.

Is there any circumstance where this coding style could noticeably slow
things down? Or is worrying about this stuff a waste of time because the
speed differences are so negligible?

Re: css recursion

am 16.06.2007 11:21:46 von Jon Slaughter

"Ben C" wrote in message
news:slrnf777ah.ul1.spamspam@bowser.marioworld...
> On 2007-06-16, Jon Slaughter wrote:
>> Say I'm giving a hypothetical structure such as(in reality it would be
>> more
>> complicated with arbitrary nestings)
>>
>>

>> Mike Jones - Subject
>>

>> Jone Smoth - Subject2
>>

>> Mike Jones - Subject2
>>

>> Jeff - Subject3
>>

>> Mike Applehaead - Subject is dead3
>>

>> Cable - Subject is dead5
>>

>>
>>
>> Is there a way to apply a style recursive to it to so that each div is
>> given
>> the same style?
>
> div { ... }
>
> or #pageComments div { ... }
>
>> What are the pro's and cons of inlining or using class=?
>
> A class is usually better than using inline style attributes since all
> the properties go in one selector. Whether you need a class or just a
> descendent selector depends on your application.
>
>> What I'm afraid of is that if I use some type of css recursion that it
>> might
>> slow down the browser when it is applying the styles.
>
> Most unlikely. You have to think this through: the browser is going to
> have to do something with every

in your page anyway to work out
> where to draw it on the screen. It's the least of its worries to add a
> style from a simple selector like div { ... }.
>
> There's no reason to assume it's programmed like this:
>
> for each div
> apply styles
>
> for each div
> do everything else
>
> rather than like this:
>
> for each div
> apply styles
> do everything else
>
> and in any case there's not much reason why the former should be
> significantly slower.
>
> In fact using a selector rather than inline styles may be a tiny bit
> faster because of the reduced amount of parsing.
>
> A more complex selector like div td div { ... } will be slightly harder
> to match since it's a little bit like an easy version of matching a
> regular expression, but I wouldn't worry about it.

Ok, I did that and I got my code sorta working... I have a slight issue. I'm
going to put it in another post.

Thanks,
Jon

Re: css recursion

am 16.06.2007 11:41:07 von Ben C

On 2007-06-16, JD wrote:
> Ben C wrote:
>
>> In fact using a selector rather than inline styles may be a tiny bit
>> faster because of the reduced amount of parsing.
>>
>> A more complex selector like div td div { ... } will be slightly harder
>> to match since it's a little bit like an easy version of matching a
>> regular expression, but I wouldn't worry about it.
>
> Sort of reminds me of a question I was thinking about recently.
>
> Is 'optimisation' any valid reason to consciously limit the depth of
> descendant selectors in CSS? For example, suppose I have a list of links
> inside a #navbar div. To style the a elements in the navbar, I could do
> this:
>
> #navbar a { ... }
>
> but I prefer to do this:
>
> #navbar ul li a { ... }
>
> just because I find the latter slightly more lucid when reading the
> stylesheet.
>
> Is there any circumstance where this coding style could noticeably slow
> things down? Or is worrying about this stuff a waste of time because the
> speed differences are so negligible?

I wouldn't worry about it. The second selector _may_ take longer to
match, but even that's an assumption, and compared to all the other
things the browser's got to do it's unlikely to be very much.

The time when you might notice things like this is popup-menu systems
that use complicated selectors involving :hovers halfway up them and
where any sluggishness would be noticeable on a slow machine. Unlikely
to matter on a PC but if you've got a browser on a mobile phone you
might see a difference, depending on how the browser's been implemented.

Re: css recursion

am 16.06.2007 13:48:23 von dorayme

In article ,
"Jon Slaughter" wrote:

> > Extraordinary thinking and speaking. "Hypothetical structure",
> > "in reality", arbitrary nestings", "a way to apply a style
> > recursive to it" (without it even being clear what the "it"
> > refers to)...
> >
>
> um... maybe you just don't understand those big words in context?

Like, of course, you do.

--
dorayme

Re: css recursion

am 16.06.2007 14:27:44 von mbstevens

On Sat, 16 Jun 2007 08:06:45 +0000, Jon Slaughter wrote:

> um... maybe you just don't understand those big words in context?
....
>
> No, I need something similar but I need to use only the those divs in the
> nesting

Have a look in here:
http://www.w3.org/TR/CSS21/cascade.html

Re: css recursion

am 17.06.2007 04:21:34 von Adrienne Boswell

Gazing into my crystal ball I observed "Jon Slaughter"
writing in
news:PTMci.33400$Um6.10018@newssvr12.news.prodigy.net:

>> Your example above does not seem like it has semantic structure, it
>> seems like div soup. It looks like some hierachial structure, so
>> might be more suited to list markup and/or headings instead of nested
>> divs.
>>
>
> no semantic structure? Its a nested set of divs... thats the
> structure.

A div is a division, or can be used as a generic block container. So if
you have:

makes more sense
semantically.

> You are right about the hierarchial structure and I did
> think about lists and maybe thats a better way to go but I feel that
> its probably equivilent to the divs as I wouldn't really gain much
> advantage using them(except maybe the automatic indention.

The automatic indentation doesn't mean s--t to a tree. The important part
is the _meaning_ of the text, and what element(s) best express that
meaning.

>
>> Think about the structure of the page, and then style it accordingly.
>
> huh?
>

When markup is done semantically, it makes CSS a lot easier, because you
are already thinking that way. Everything has a place, and everything in
it's place.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Re: css recursion

am 17.06.2007 10:49:06 von Harlan Messinger

Jon Slaughter wrote:
> Say I'm giving a hypothetical structure such as(in reality it would be more
> complicated with arbitrary nestings)
>
>

> Mike Jones - Subject
>

> Jone Smoth - Subject2
>

> Mike Jones - Subject2
>

> Jeff - Subject3
>

> Mike Applehaead - Subject is dead3
>

> Cable - Subject is dead5
>

>
>
> Is there a way to apply a style recursive to it to so that each div is given
> the same style? What are the pro's and cons of inlining or using class=?

#PageComments div { [styles] }

Especially if every DIV is supposed to have the same style, why *would*
you inline if you don't have to?
>
> What I'm afraid of is that if I use some type of css recursion that it might
> slow down the browser when it is applying the styles.

Every element on the page is styled in some way or other whether it's a
purely browser-default way or a way that incorporates your own
instructions.