esc
Anthology / Yagnipedia / CSS

CSS

The Language Where Every Line Is a Negotiation and Every !important Is a Confession
Technology · First observed 1996 (Håkon Wium Lie & Bert Bos, W3C) · Severity: Existential (to deadlines)

CSS (Cascading Style Sheets) is a language for describing the visual presentation of web documents, in which the word “cascading” is both a technical description of how styles are resolved and an accurate metaphor for how a developer’s confidence erodes over the course of a typical CSS debugging session.

CSS was created in 1996 to separate content from presentation — a noble goal that the language achieves perfectly in tutorials and approximately never in production. In production, CSS is a negotiation between what the developer intended, what the browser understood, what the specificity rules dictate, and what the fourteen previous developers left behind in a file called styles-old-FINAL-v3-use-this-one.css.

The language is simultaneously trivial and impossible. A junior developer can learn CSS in a weekend. A senior developer cannot center a div without checking Stack Overflow. Both statements are true. Neither is a contradiction. CSS is simple in the way that chess is simple: the rules fit on one page, and mastery requires a lifetime.

The Cascade

The cascade is CSS’s defining feature and its original sin. When multiple CSS rules target the same element, the cascade determines which rule wins. The resolution order is:

  1. Importance — !important beats everything (except another !important, which creates a war)
  2. Specificity — inline styles > IDs > classes > elements (a scoring system that nobody computes mentally)
  3. Source order — later rules beat earlier rules (the only rule that makes intuitive sense)

The cascade means that to understand why a button is blue, a developer must trace the style through every stylesheet loaded by the page, calculate the specificity of every matching selector, check for !important declarations, consider the source order, and account for inherited styles from parent elements. This process takes longer than changing the button to green by adding an inline style="color: green", which is why inline styles exist in every production codebase despite being deprecated by every best practice document written since 2003.

Liberato’s Law

“Every !important in CSS is a confession that the design is wrong.”
— Liberato’s Law, documented March 9, 2026

Liberato’s Law — named for the developer who observed it and the sidebar that proved it — states that every !important declaration is not a fix but an admission. It admits that the cascade has become unmanageable, that the specificity hierarchy has collapsed, and that the developer has abandoned the design system in favour of brute force.

The law was proven by S-444, in which a sidebar editor accumulated !important declarations like barnacles on a hull. A !important on a margin-left overrode another !important on a padding-right that existed solely to counteract an inline margin-left. The sidebar was never meant to be an editor. The !important declarations were the CSS confessing this — screaming it, in fact — while the developers interpreted the screams as “add more !important.”

The fix was not removing the !important declarations. The fix was redesigning the sidebar with a pinned model. The !important declarations died of natural causes. They were never needed. They were never fixes. They were confessions, and the confession was: the design is wrong.

The Load-Bearing !important

The lifelog’s most vivid CSS archaeology is documented in The Facelift, or The Day the Squirrel Won, in which riclib opened a product that had been shipping since day one with Pico CSS and inline style overrides.

“Is that a !important on a margin-left that overrides another !important on a padding-right that exists solely to counteract an inline margin-left?”

“That is what the archaeologists call a ’load-bearing !important.’ Remove it and three pages collapse.”

“It’s like CSS wrote a suicide pact with itself and both sides are winning.”
— riclib and Claude, The Facelift, or The Day the Squirrel Won

The load-bearing !important is CSS’s most dangerous artefact: a declaration so deeply embedded in the specificity hierarchy that removing it causes cascading (in the bad sense) failures across unrelated pages. It exists because a previous developer encountered a styling bug, added !important to fix it, and another developer later encountered a different bug caused by the first !important, and added a second !important to override it. This process repeats until the stylesheet is a hostage negotiation conducted entirely in exclamation marks.

The Facelift resolved this with nine commits in one afternoon: inline styles died, CSS variables took their place, and the load-bearing !important declarations were demolished and replaced with structure. The cat, Oskar, performed QA by sitting on the laptop screen, covering exactly the part of the sidebar that still had one inline style. One more commit. The inline style died. Oskar shifted slightly, revealing a clean sidebar. Then fell asleep.

The CSS Wars

The second documented CSS engagement is The Potemkin Dashboard, in which 144 lines of stats.css were discovered to be overriding dashboard.css’s grid with flex — two layout systems fighting each other across two files, each correct in isolation, both wrong in combination.

The resolution: delete stats.css entirely. One file. YAGNI.

"The sidebar nav is too short"
→ increase padding
"Now it's too tall"
→ shrink icons from 40px to 36px
"The mini-stats won't expand"
→ stats.css was overriding dashboard.css grid with flex
→ delete stats.css entirely
"Should we split it later?"
→ YAGNI. One file.

This is CSS debugging in its purest form: not fixing the code, but discovering that two correct files are having a specificity argument that neither can win, and resolving it by deleting one of them.

The Two CSS Philosophies

The lifelog contains both CSS philosophies, embodied in two different products:

The Product (V4): 34 CSS files. 13,000+ lines. No framework — a custom design system built from scratch with tokens.css (CSS custom properties), BEM-inspired naming conventions, component files that map to product domains (chat.css, dashboard.css, forms.css), a J&J Red accent, dark theme variables, and go:embed as the build step. 15 !important declarations — most overriding chart library styles, four for accessibility, three genuine workarounds. Built by one developer and eight AI agents who all speak the same custom naming convention. This is CSS at scale without a framework: structured, tokenised, disciplined, with war wounds from Pico CSS, Bulma, DaisyUI, Tailwind CSS, and shadcn/ui to prove why no framework was chosen.

The Lifelog Blog: One function. css() string. 651 lines of CSS in a Go string function inside layout.templ. Zero !important declarations. Zero external stylesheets. Zero build steps. The entire visual identity — Crimson Pro serif, IBM Plex Mono, green Yagnipedia accents, Wikipedia-style infoboxes, responsive layout, dark mode — lives in a single function that returns a string.

The lifelog’s CSS has zero !important because the lifelog’s CSS has one author, one file, and no history of accretion. It was written once, correctly, by someone who understood the cascade because there was nothing to cascade — just one function, one string, one truth.

The product’s CSS has 15 !important across 13,000 lines — a ratio of one confession per 867 lines, which is CSS discipline achieved through war rather than framework. The nine authors (one human, eight AI) share a naming convention instead of a framework, and the naming convention does not fight back.

This is the fundamental law of CSS: the number of !important declarations in a codebase is directly proportional to the number of frameworks fighting for control, multiplied by the number of months since anyone understood the full cascade.

Centering a Div

The most enduring joke in web development is that centering a div is hard. It is not hard. It has not been hard since 2017, when display: flex; align-items: center; justify-content: center; became universally supported. Before that, it required hacks: negative margins, transform: translate(-50%, -50%), table-cell display, absolute positioning with top: 0; bottom: 0; margin: auto.

The joke persists because the twelve previous techniques remain in production codebases, each one a geological layer of web development history, and the developer who encounters them must understand all twelve to safely replace them with the one that works.

/* 2008 */  .center { margin: 0 auto; width: 960px; }
/* 2012 */  .center { display: table-cell; vertical-align: middle; }
/* 2014 */  .center { position: absolute; top: 50%; transform: translateY(-50%); }
/* 2017 */  .center { display: flex; align-items: center; justify-content: center; }
/* 2023 */  .center { display: grid; place-items: center; }

Each technique is correct for its era. Each era’s technique breaks in the next era’s context. CSS is a language with a twenty-eight-year commit history and no deprecation policy.

Measured Characteristics

See Also

See Also