Don't forget about inherit

12 November 2012

An often forgotten, but so powerfull value in CSS is the "inherit" value. Learn to use this value and save a lot of time, bytes and irritation!

If you're writing CSS code that's as efficient as possible, it's important to make your classes as flexible as possible to avoid code duplication. I'll give you a few examples of inherit usage that makes our lives a little easier.

Inherit what?


Inherit is a value in CSS that can be used on almost every property. Some properties inherit their parents value by default (like font-size), but most properties don't. If you set the background color of the body element to red, the child elements will still have a transparent background color (default value). To let the child elements have the same background color, you can set their values to "inherit". If you change the body background color then, the child background colors will change too.

Default link color


HTML5boilerplate defines a default link color blue and purple for the visited state. That's a good thing, but most site designs will not allow a default blue link color. So you'll have to set the default to another color (often black or a darker gray). But what if the navigation of the page uses white links on a black header background? The links will not be visible if the default is black.

a {
  color: #000; /* all links are black, also on dark backgrounds */
}
#header {
  background: #000; /* the header has a black background */
  color: #FFF; /* and white text to make it readable */
}
#header a {
  color: #FFF; /* you have to manually set the link color in the header to white */
}

This example could be simpler of all links inherit the color of their parents by default:

a {
  color: inherit; /* all links will inherit their colors from the parents */
}
#header {
  background: #000; /* the header has a black background */
  color: #FFF; /* and white text to make it readable */
}

It is a very simple example, but you can imagine how much time, bytes and style definitions this can save in larger projects!

Pseudo elements


I often use pseudo elements to add simple shapes to elements. Nine out of ten times, this pseudo "child" element has the same background color as its parent. And nine out of ten times you automatically define this color again for the pseudo element.

.sample {
  width: 100px; height: 100px;
  position: relative;
  background: red;
}
.sample:after {
  content: '';
  width: 20px; height: 20px;
  background: red;
  right: -20px;
  top: 40px;
}

When the color of the main element changes, the pseudo element doesn't change. You'll have to change it also manually. This can be forgotten or give unexpected results in any other way. To avoid this, set the background color of the pseudo to "inherit" and it will always inherit and use its parents background color.

.sample:after {
  ...
  background: inherit;
  ...
}

Even easier, but also more dangerous, would be to set the background color for all pseudo elements to "inherit" by default...

*:after,
*:before {
  content: '';
  position: absolute;
  background-color: inherit;
}

If you use 10 different pseudo elements, they probably all use the properties "content" and "position" so they can be set as a default. Overriding them somewhere else in the stylesheet is always possible.

Downsides


The problem of setting default values like this is that it might affect the "portability" of the code for other developers. If I set a default for all pseudo elements like the example above and set some additional properties in a later class declaration, and another developer works on the stylesheet and doesn't know about the default settings, he/she might have a hard time to figure out why a certain elements behaves like it does.

But with almost everybody using "inspect this element" and developer tools these days, I don't see this downside as a really big one...
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    Phil Did,

    06 December 2012

    Useful Thank's