The Cascade Conspiracy: Why Your CSS Reset Might Be Working Against You

#webdev #programming #css #frontend

Do you ever feel like your CSS reset is making you work harder, not smarter? Like you're fighting the very nature of CSS itself?
Well, you just might be onto something.
Let’s explore why a setup that forces you to completely replace your base styles might not be the best strategy, especially regarding typography.

The Universal Selector: A gun in a knife fight.

Many CSS resets start with something like this:

* {
  margin: 0;
  padding: 0;
  font-family: 'Some Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

This is like telling every single element in your HTML, "You're all exactly the same now!" It's the CSS equivalent of making everyone wear the same uniform to a party. Sure, it's consistent, but where's the fun in that?

The Cascade: Nature's Way of Styling

Here's a more elegant approach:

body {
  font-family: 'Some Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Look ma, no universal selector! */
}

This is like setting the dress code for the party instead of mandating specific outfits. Everything inherits these styles naturally, the way CSS intended.

Why the Cascade Wins for Typography

1. It's More Performant

The browser doesn't need to check EVERY element for font styles
Less specificity conflicts to resolve
Smaller CSS bundle size (yes, every byte counts!)

2. It's More Maintainable

/* The universal way - prepare for repetition */
* {
  font-family: 'Old Sans', sans-serif;
}

h2 {
  font-family: 'Times New Roman', serif;
}

h2 span {
  font-family: 'Times New Roman', serif; /* Again? Really? */
}

h2 span a {
  font-family: 'Times New Roman', serif; /* Getting tired yet? */
}

/* The cascade way - ahh, much better */
body {
  font-family: 'Old Sans', sans-serif;
}

h2 {
  font-family: 'New Man', serif; /* ..offered one sacrifice forever.. */
}

3. It Works With Browser Defaults, Not Against Them

Monospace fonts in <code> elements? Still there!
Form elements looking like form elements? You bet!
Semantic HTML still meaning something? Absolutely!

The Hybrid Approach: Best of Both Worlds

Here's what a modern, cascade-friendly reset might look like:

/* Reset what needs resetting */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Let typography cascade naturally */
body {
  font-family: 'Old Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Reset specific elements that need it */
button,
input,
textarea {
  font-family: 'Times New Roman', serif;
}

/* Preserve useful defaults */
pre,
code {
  /* Look, ma! No font-family override! */
  margin: 0;
  padding: 0;
}

When to Break the Rules

Of course, there are times when you might want to use the universal selector. For instance, for setting box-sizing: border-box or removing margins and padding globally.

But for typography? Let it flow, let it flow, let it flow!

The Bottom Line

CSS is called Cascading Style Sheets for a reason. While resets have their place, fighting the cascade for typography is like swimming upstream – exhausting and ultimately unnecessary. By letting your type styles flow naturally from the body element, you're working with CSS, not against it.

Remember: Good CSS is like a river – it flows naturally from top to bottom, carrying your styles along with it. Don't be the developer who tries to make the river flow backwards!

P.S. If you're still using the universal selector for typography, we need to talk about the cascade and effect... preferably over coffee.