Ockham’s Razor in CSS: Less is Maintainability#

Ockham’s Razor applied to web development states that given two solutions for the same visual problem, the one requiring less code and less specific selectors is usually the right one. Prioritizing intrinsic layouts and native properties reduces technical debt and boosts performance by simplifying the browser’s render tree.

Pluralitas non est ponenda sine necessitate.

The Philosophical Principle#

William of Ockham, a 14th-century Franciscan friar, knew nothing about z-index: 999999, but his principle is the ultimate cure for “CSS Hell”. The idea is simple: do not multiply entities without necessity.

In our world, this means if you can solve a layout with a single line of CSS Grid, you shouldn’t load a 50KB framework or fight with 15 layers of Flexbox and negative margins. If it hurts to write, you probably have too many lines.

The Razor in Action: Intrinsic Layout#

Check out this responsive card grid example. Many devs still resort to heavy libraries or a sea of manual Media Queries.

+/-

Ockham Refactoring (Logical Properties)

css

/* ❌ The complex solution (Manual Media Queries) */
.grid {
  display: flex;
  flex-wrap: wrap;
}
.card {
  inline-size: 100%;
}
@media (min-width: 600px) {
  .card { inline-size: 50%; }
}
@media (min-width: 1000px) {
  .card { inline-size: 33.33%; }
}

/* ✅ The Razor (Intrinsic Layout) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

By using auto-fit and minmax, you’re giving the browser an intent, not a rigid instruction. You let the rendering engine make the best decision based on available space. That is Pragmatic Engineering.

Abstraction vs. Simplicity#

Sometimes, Ockham’s Razor forces us to question even our favorite tools. Do you really need that abstraction, or are you just afraid of touching native CSS?

Utility-First Frameworks vs. Modern Vanilla CSS

Why Vanilla CSS wins in 2026

Zero dependencies and zero build time
Use of CSS Layers (@layer) for total specificity control
Native support for complex variables and color-mix()
Lower carbon footprint and faster LCP

When to stick with Frameworks

Learning curve for teams used to utilities
Requires a solid Systemic Design foundation (Design Tokens)

The Golden Rule of Specificity#

Every nested selector you add (.header .nav .item .link) is debt with high interest. The browser works harder, and you end up trapped in a selector war only solvable by the !important hammer.

Real World Results#

By applying this principle on campa.dev, I achieved these tangible results which I detail in my post about portfolio engineering:

-45% ↗

CSS Bytes

100 ↗

Lighthouse Perf

Flat ↗

Architecture

As I always say during my consultancies: the best line of code is the one you don’t have to write. If your CSS feels like a constant struggle, it’s time to take out the razor and start cutting the fat.

Got a CSS block driving you crazy? Let’s talk and simplify it together.