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.

11 Comments

  1. mijkle says:

    thanks that was helpful and to the point!

  2. Ryan says:

    Thank you for that helpful insight into inheritance. Let us never overlook the importance of the oh so basic, very easy to understand demonstration for us simple people.

  3. Saz says:

    Thanks! Helpful…

  4. Tom Stewart says:

    Okay with element inheritance. Does the same apply for class inheritance.
    For example:
    .Box {BORDER:1px SOLID #CCC}
    Then
    .Box .IBox {TEXT-INDENT:5px}
    Still Fuzzy. ???

  5. kalu says:

    When designing the whole website how to approach the css. There are just too many classes we will end up having, what naming convention to use how to minimize the number of classes.
    I wonder / wonder / wonder ?

  6. bart says:

    Nice work. Now if only css was object oriented.

  7. That was very nicely explained.
    I would also like to second the question by Tom Stewart:
    “Does the same apply for class inheritance”
    Thank you

  8. Benny says:

    Very nice example, especially for CSS-beginners really easy to undestand.
    thx!

  9. Chris Needham says:

    Very, very interesting. I wish I’d known about that years ago.
    The only thing I would say, is that using the ID attribute is a bit of a problem as you can’t duplicate IDs in the page, especially if you are using XSLT to generate the page.
    However, the descendant selectors will also work when you are using classes, so you can go…
    TABLE.DataTable TR TD {background-color:blue}
    which will give a TD which is contained within a DataTable a blue background.
    What I need to get working before I start using this is to be able to go…
    TABLE.DataTable TR TD {background-color:blue}
    TABLE.DataTable TR:first-child TD {background-color:red}
    so that the header rows are with a red background.
    If anybody does manage to get this working please drop me an e-mail.
    Cheers,
    Chris

  10. David says:

    Very easy to understand even for foreigners as myself ;D Many thanks!

  11. Christian says:

    Chris Needham,
    How about using thead?