CSS Inheritance

One of the easiest ways to optimize your code when dealing with basic markup styled with CSS, is to strip out unnecessary class declarations as well as redundant div tags. The following is an attempt at a mini-tutorial.

I’ve been looking at a lot of code lately, and something I see more often than not is markup that is “over-declared”. For instance, let’s say you have a div that contains some other tags — h1, maybe a few customized anchor tags, etc. Some might say:

<div id="stuff"><h1 class="red">Big Title<h1></div>

And then in their CSS:

#stuff { padding: 20px; border: 1px solid #000; }
while adding a second declaration for
h1.big { color: red; }

Let’s do this with less code by stripping out the class="red" declaration from h1 tags and use inheritance in the CSS to do the work by assigning all h1 tags within #stuff a style:

HTML: <div id="stuff"><h1>Big Title<h1><div>

CSS: #stuff h1 { color: red; }

Now, stripping out one class declaration may seem like chump change, but when you’re giving class names to elements over and over again — that are easily referenced in CSS by it’s parent id — it begins to add up.

The inheritance works with any HTML tag, so instead of doing:

<div id="stuff"><div id="stuffinside">blah blah<div><div>

You could do:

<div id="stuff"><div>blah blah<div><div>

While declaring in the CSS that a div that’s inside #stuff should be styled a certain way:

#stuff div { background: #369; }

You may even keep going deeper and deeper when nesting elements:

#stuff div div div { background: #369; }

The above would specify the third div that’s nested within #stuff should have a blue background

The point: assign id or class once. Then use CSS to access and style the generic child elements within. It’s an easy way to simplify your structure.

While it might seem elementary to many (and not something I invented) — it is something I’ve been seeing over and over again in CSS-based layouts.

Footnote: There are certainly times where it’s appropriate to use class names inside elements that are already labeled — but there are often just as many times when they are unnecessary and the bloat can be cut down.