CSS is Emotional: Inheritance - The Family Drama of CSS

#webdev #css #frontend #programming

In the grand narrative of our stylesheets, inheritance is where things get complicated. It's where CSS starts to feel less like a technical specification and more like a family reunion—complete with unresolved tensions, unexpected behaviors, and the profound ways our past shapes our present.

The Roots of Inheritance

Just like in a family, in CSS, every element inherits certain characteristics from its parent. Some traits are passed down deliberately, some accidentally, and some we spend years trying to override. Sound familiar?

Consider a simple example:

This isn't just code. This is a lineage. The body is like a primogenitor of the bloodline, setting the foundational tone for everything that comes after. Every child element begins its life carrying those initial traits—the default font, the base color, the underlying mood of the entire document.

Overriding the Family Legacy

But here's where it gets interesting: in both families and CSS, inheritance doesn't mean imprisonment. Just as we can choose our path different from our parents, CSS elements can declare their own identity:

.content h2 {
  font-family: "Times New Roman", serif;
  /* Breaking free from the inherited font */

  span {
    color: white;
    /* The typographic equivalent of
       dying your hair a wild color */
  }
}

It's an act of declaration. Of individuality. Of saying, "I respect where I came from, but I'm not bound by it."

The Unintended Inheritances

Not all inherited traits are welcome. Sometimes, we inherit CSS properties we didn't ask for—just like those family quirks we never requested. A nested <div> might suddenly find itself with margins or paddings it never wanted, a digital echo of those family dynamics where you unexpectedly find yourself carrying forward someone else's emotional baggage.

Modern CSS gives us powerful tools to manage this — 3 values we can use to control inheritance: initial, inherit and unset.

initial is disowning the family legacy completely — "I'm starting fresh, no family history here."

inherit is fully embracing your roots — "I am exactly like my parents, proud and unchanged."

unset is the nuanced family member who says, "I'll keep what works from our family story, but I'm free to redefine the rest." It respects the inheritance where it makes sense, but isn't afraid to break the pattern when needed.

It's like family therapy, but for your stylesheet.

.going-rogue {
    all: initial;
    /* Complete reset! */
}

.embrace-roots {
    color: inherit;
    /* Proudly continue the family legacy. */
}

.all-about-balance {
    all: unset;
    /* Mindfully balance inheritance and individuality. */
}

A Profound Metaphor

Inheritance in CSS is more than a technical mechanism. It's a reflection of how traits, memories, and experiences flow through systems—be they familial, cultural, or digital.

Some traits we cherish and preserve. Some we modify. Some we reject entirely. But they all start somewhere, passed down through unseen connections, shaping what comes next.

Cascading
Style
Sheet

Yup! You are welcome 😌

In CSS, as in life, we are never truly starting from scratch. We are always building upon something that came before. Inheritance is the silent storyteller of our stylesheets, the foundational thread that connects elements like generations through the cascade, giving CSS its dynamic, interconnected nature.

Reflection Questions

What "inherited traits" do you carry in your code?
How deliberately are you choosing which styles (and which emotional legacies) you pass forward?
When was the last time you consciously "overrode" an inherited pattern—in your stylesheet or in your life?

I'm eager to hear from you - share your answers in the comments.

Next week: "Flexbox & Grid: A Love Story About Compromise"

Share your inheritance stories—both CSS and personal—in the comments below.

As usual, here's the CodePen used to design the banner 😊