Use inherit to reduce repetition of CSS property values

Every now and then you will find yourself having to repeat the same value for a particular property in several CSS rules. Sometimes doing so is necessary, but there are some situations when you can use the “inherit” value to avoid repeating yourself.

In my experience, the properties I use inherit for most often are color plus properties related to background and font (both shorthand and the individual properties like background-color, font-size and font-family).

A few examples, then.

Let’s say you have used the following CSS rules to make all links dark blue, body text set in a serif font and dark grey, and all headings bold and dark red in a sans-serif font, like this:

body {
    color:#444;
    font-family:Georgia, Times, serif;
}
a:link {
    color:#1b0095;
}
h1, h2, h3, h4, h5, h6 {
    color:#750606;
    font-weight:bold;
    font-family:Helvetica, Arial, sans-serif;
}

Then you realise that in the main navigation you want links to be the same colour as the body text. You also want to make the h2 headings in the sidebar be the same font-family and colour as the body text. You could of course repeat the values, like this:

.nav-main a {
    color:#444;
}
#sidebar h2 {
    color:#444;
    font-family:Georgia, Times, serif;
}

That works fine. But what if you then change the colour or font-family values you have declared on the body element? The navigation links and sidebar headings will stay the same, forcing you to change the values in those rules as well. Sure doesn’t make maintenance easier.

Here’s where the usefulness of the inherit value comes in. This is from the CSS 2.1 specification, 6.2.1 The ‘inherit’ value:

Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent. The ‘inherit’ value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.

So by changing the above rules to use inherit, the links and headings will inherit the value from their parents and change when you change the values in the body { } rule (unless of course you have declared something else on a closer ancestor element):

.nav-main a {
    color:inherit;
}
#sidebar h2 {
    color:inherit;
    font-size:inherit;
}

No need to do a search-and-replace whenever you change these properties anymore.

The “normal” use case for inherit is for inherited values like color and font, but you can also use it to force elements to inherit other values, like background, margin and padding. To find out whether a property is inherited or not, check Appendix F. Full property table in the CSS 2.1 specification (this table is also useful to check a property’s initial value, which you sometimes need to use to “undo” previously applied rules).

So what’s the catch? Not a particularly big one these days, unless you absolutely need the declarations you want to use inherit for to work in IE7 and earlier. While other browsers have supported it since approximately forever, Internet Explorer didn’t get full inherit support until version 8. If you and your clients can live with the occasional colour, background or font being off in IE7, you’re fine. If not, well, then you’ll either need to hold off on using inherit or redeclare any must-have properties in an IE-specific stylesheet.

Posted on September 27, 2012 in CSS

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.