55 CSS Jokes Every Front-End Developer Has Lived

I centered a div. My team threw a parade. The parade was also not centered.

There are nine ways to center a div. I have tried all of them on the same div, in order, and the div is now somewhere in Belgium.

z-index: 9999 was not enough. z-index: 99999 was not enough. The element behind it had position: static. I had been fighting a ghost.

I added !important. Then the next developer added !important. Then a third. The stylesheet is now a screaming contest.

Specificity is just CSS doing math you did not consent to.

I wrote one class. The inline style overrode it. The !important on a sibling overrode that. The browser default came back through a child selector. I went home.

Flexbox solved everything. Except the one layout I needed, which was a grid. So I learned grid. Now I use both, in the same component, fighting each other.

Margin collapse is when two margins meet and decide one of them was enough.

I set margin-top: 20px on a child. It pushed the parent down instead. I have read the spec four times. The spec is correct. I am the one who is wrong.

The design said 16px. The browser rendered 15.99996px. The QA tester opened a ticket. I closed it. They reopened it. We are now in mediation.

I used vh on mobile. The address bar moved. My footer is now in the next time zone.

100vw includes the scrollbar. I did not know that. The horizontal scroll has been there since 2019.

I wrote position: absolute without a positioned parent. The element went to a place I did not know existed. It is making friends there.

The button looked perfect on my machine. My machine is a 27 inch monitor. The user is on a phone. The button is now the size of a postage stamp.

I learned CSS Grid. Then I tried to use it on a real project. I went back to flexbox inside flexbox inside flexbox.

Subgrid landed. Three browsers shipped it. The fourth shipped it last year. We supported the fourth. We could not use subgrid for three years.

I asked the designer for the spacing. They said vibes. I shipped vibes. The PM opened a ticket about the vibes.

I once nested a selector seven levels deep. It took an hour to override one color. I quit and joined a different team. The selector is still there.

CSS in JS exists. CSS modules exist. Tailwind exists. Plain CSS exists. We picked all four in the same repo. Onboarding takes a week.

Tailwind says use utility classes. My HTML now reads like a license plate auction.

I tried to vertically align text in a button. The text moved one pixel. The button grew two. The page reflowed. The deploy failed.

display: inline-block adds a mysterious gap. The gap is whitespace in the HTML. I have known this for ten years. I forget every time.

I floated an element in 2024. The junior asked why. I said it was the only way I knew. She wrote a flexbox version. It worked. I went outside for a minute.

clearfix was a class. Then a hack. Then a Sass mixin. Then a relic. My codebase still has all four.

The bug only appears in Safari. The Safari devtools work on a Mac. The bug is reported by Windows users. I do not have a Mac. The bug is permanent.

I wrote width: 100%. The element overflowed by exactly the padding. I learned about box-sizing that day. I have written box-sizing: border-box at the top of every project since.

Pseudo-elements are real elements that the spec refuses to acknowledge.

I styled ::before and ::after. The content property needed a value. I gave it an empty string. The element appeared. I closed the laptop and walked away.

calc() is a function that lets you do math inside CSS. It is also a function that lets you do math wrong inside CSS.

I wrote calc(100% - 20px). The element was off by a pixel. I changed it to calc(100% - 21px). Now it is off by a pixel in the other direction. This is my life.

Custom properties are variables. They cascade. They inherit. They can be set inline. The Sass team has been quietly winning a war they did not know they were in.

I named a variable --primary-color. The brand changed. I now have --primary-color set to the secondary color. The secondary color is the old primary. Nobody on the new team can read the stylesheet.

I used em instead of rem. Now the font scales with the parent. The parent scales with its parent. The h1 inside three nested divs is the size of a thumbtack.

rem is em but for the root. The root is html. The html font size is 16px unless someone changed it. Someone changed it.

I tried to animate height from 0 to auto. CSS said no. CSS has said no since 2010. CSS will say no in 2030.

transition: all is a love letter from past me to the GPU. The GPU read it and filed it under regrets.

I added a transition on background-color. It ran on every property the element had. Including the ones I did not know it had. The page now breathes.

Keyframes are easier than they look. Until you need to chain them. Then you need a state machine. Then you need a JavaScript animation library. Then you wonder why CSS exists.

I used will-change on every element. The browser ran out of will. The page froze. I learned moderation. Then I forgot.

Media queries are how you find out your design does not work on a tablet.

I wrote a mobile-first stylesheet. The desktop overrides are now longer than the mobile rules. I think I have invented desktop-second.

Container queries shipped. The team has been writing container queries for three months. The codebase has zero container queries. We are still writing media queries. Habits are heavy.

I wrote @supports for a property. Every browser supported it. The fallback path has run zero times. It will run forever.

Print stylesheets exist. I have written one. The user printed the page. They emailed me a photo of the printout. The footer was on a second page. They wanted it on the first.

I styled a form. The select element refused. The select element has been refusing since 1996. The select element will outlive us all.

appearance: none is a prayer. The browser hears it. The browser ignores half of it. The select still looks native on Safari.

I asked a senior for help with a layout bug. She opened the devtools, deleted three properties, and the bug was fixed. I had added those three properties yesterday. She did not say anything. She did not have to.

There is a stylesheet in our repo from 2014. Nobody knows what selectors it applies to. Deleting it breaks the homepage. Keeping it breaks the about page. We have learned to live with this.

I wrote a one-line CSS fix. It was reviewed by three engineers, blocked by design, approved by the PM, blocked again by accessibility, approved again, and merged six weeks later. The bug was a typo.

Reset stylesheets exist because browsers cannot agree on what a button is.

I used normalize.css. Then reset.css. Then sanitize.css. Then I wrote my own. Then I deleted it and went back to normalize. The circle is round.

The design system has 200 components. We use four. The other 196 are documented, tested, and unused. They are the design system's retirement plan.

Sass nesting was a great idea. Native CSS nesting shipped years later. The Sass team had been right the whole time. CSS apologized in the form of a spec.

I wrote pointer-events: none on an overlay. The overlay no longer caught clicks. The button under it caught clicks. The form submitted. The user was charged twice. I learned about overlays the hard way.

I have centered the div. It is centered on my screen, in this browser, at this zoom level, on this OS, with this font installed. Tomorrow it will not be centered. The div was never the problem. The div was the lesson.