Question about nesting / specificity

Skip to first unread message

Aeron Glemann

Sep 15, 2011, 9:45:45 AM9/15/11
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?


Brian Moon

Sep 15, 2011, 12:15:00 PM9/15/11
to, Aeron Glemann

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


> --
> You received this message because you are subscribed to the Google
> Groups "Object Oriented CSS" group.
> To post to this group, send email to
> To unsubscribe from this group, send email to
> For more options, visit this group at

Nicole Sullivan

Sep 15, 2011, 3:21:35 PM9/15/11
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 Sullivan

Smush it
Book  Even Faster Websites with O'Reilly

Chris Eppstein

Sep 15, 2011, 4:58:38 PM9/15/11
to Object Oriented CSS
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?

> > For more options, visit this group at

Dave Gregory

Sep 15, 2011, 5:31:42 PM9/15/11
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!)


Reply all
Reply to author
0 new messages