Photograph of Petra Treasury, Jordan, taken through a canyon

inherit is one of those aspects of CSS that developers tend to take for granted, forgetting it exists – or worse, regarding it as an enemy – especially when its power could be used for good.

I’ve talked about the chain of style inheritance before: how CSS in the browser’s own UA stylesheet is automatically followed on every web page, with those rules guided and amended by linked, embedded, scoped and inline styles. CSS makes (mostly) logical assumptions about which elements inherit what property values, which is why writing the following is such a timesaver during development:

body { color: #311; }

By writing a single line in a linked style sheet, every piece of text shares the same color. However, there are some exceptions: links, for example, are still blue. Assuming that you want links on your site to be the same color as body text (distinguishing them by weight or stroke instead), it’s tempting to do the following: 

body { color: #311; }
a { color: #311; }

While this works, you have created a problem: if the body color changes, you must go into the declaration for links and change them the same time. In other words, you have just doubled the work required to maintain your site.

You could get around this by grouping the selectors, but that gets tricky if the CSS becomes more complicated: 

body { 
	font-family: Avenir, sans-serif;
	color: #311; 
}
a { 
	text-decoration: none;
	color: #311;
	border-bottom: 1px dashed; 
}

You can start to see how easy it is to lose track of where rules are applied in a stylesheet: add a few more declarations between the body and links and you create a real challenge in tracking changes.

Using inherit To Your Advantage

Instead, think of the styles in a descriptive way. What we’re really saying is “the color of links depends on the color of body text on the page.” In that case, this makes much more sense as a declaration: 

body { 
	font-family: Avenir, sans-serif; 
	color: #a11; 
}
a { 
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed; 
}

Rather than trying to copy and paste a color, we’re explicitly saying “links inherit the color of their ancestor element” (i.e. the body). The result:

And why do we fall?

So we can learn to pick ourselves up.

Note that border is also affected by the text color: unless we explicitly define it, an element’s border-color automatically inherits the text color.

What if the inheritance is too broad? What if we want these rules to be true only for links that appear in paragraphs, but not elsewhere? In that case, we can restrict the scope of the rules by using a descendant selector: 

body { 
	font-family: Avenir, sans-serif; 
	color: #a11; 
}
p a { 
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed;
}

Note that this continues to work even if we place elements inside a container with a new general rule: 

<body>
	<h1>Batman</h1>
	<aside>
		<h1>The Legend</h1>
		</aside>
</body>

Starting with this CSS: 

body { 
	font-family: Avenir, sans-serif; 
	color: firebrick; 
}
h1 { color: yellow; }
aside { color: #333; }

…means that the <h1> elements inside both the <body> and <aside> will be yellow, even though we have specified that the text color in <aside> elements should be red; the h1 { color: yellow; } rule has a higher specificity. By changing the rule to this: 

body { 
	font-family: Avenir, sans-serif; 
	color: firebrick; 
}
h1 { color: inherit; }
aside { color: #333; }

The <h1> element will gain the color of whatever element it is within:

BATMAN

Conclusion

While developers fight against CSS inheritance rules, they can very often be turned to your advantage, creating swifter, leaner, easier to maintain stylesheets.

Photograph of Petra Treasury by Marc Meylemans.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.