Question about nesting / specificity

[Aeron Glemann]

Hypothetical scenario:

The header and footer are often different enough from the body that need their own default (body might have light background, header/footer dark background).

.head a { /* set default styles for links in header */ }

But now if I want one of those link to inherit from a "button" object:

<a class="button" />

The ".head a" rule has a higher specificity than the ".button", so what's the best way to balance inheritance/cascade in this scenario?

Tky!

[Brian Moon]

Hi,

As I understand the OOCSS philosophy, links in the head should have
their own class as should links in the footer. A key idea behind OOCSS
as a philosophy (as I have understood it) is that an object (link, box,
whatever) could be placed anywhere and maintain its style.

In addition this selector is not desired from a performance perspective.
Selectors are applied form right to left. So, when finding what elements
to apply this style to, the browser will first find all a tags, then
find a tags that are inside a .head, walking every parent element of
every a to discover if it is inside of a .head.

Now, I still have some of this in my CSS I admit. I am working on
getting it all out of there.

A better solution may be:

<a class="head button">

a.head { /* set default styles for links in header */ }

It does lead to a bit more text in the document, but it is much more
controllable.

Brian.
http://brian.moonspot.net

> --
> You received this message because you are subscribed to the Google
> Groups "Object Oriented CSS" group.
> To post to this group, send email to object-or...@googlegroups.com.
> To unsubscribe from this group, send email to
> object-oriented...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/object-oriented-css?hl=en.

[Nicole Sullivan]

Headers and footers are exceptions, they are usually so different from the rest of the page and they often need to be truly pixel perfect. In most cases, I don't try to use objects in the header and footer. I just code them the old way. If you want, you can use objects in there, just dont' change the way they behave based on being in the head. If they don't fit the use case exactly, just code up something custom. 

Nicole

--

Nicole Sullivan

Object Oriented CSS  http://wiki.github.com/stubbornella/oocss

Smush it  http://smush.it

Website  http://stubbornella.org

Tweet!  http://twitter.com/stubbornella

Book  Even Faster Websites with O'Reilly

[Chris Eppstein]

Hi Nicole,

This is not something I've heard you say before and I think it's a
really important point. Can I suggest you make a small blog post on
this topic?

Chris

> > For more options, visit this group athttp://groups.google.com/group/object-oriented-css?hl=en.

[Dave Gregory]

I second that.. I've come to that same conclusion on my own, but it's good to hear I'm not the only one. (whew!)

Dave.