December 5, 2025
Fizz, Buzz & Byte Wars
Fizz Buzz in CSS
A simple brainteaser becomes a wild CSS flex and a comment-section cage match
TLDR: A developer printed the Fizz Buzz sequence using only CSS, squeezing it to 152 characters while others hit 145 and 144. The comments erupted into a debate: playful creativity versus code-golf purity, with purists insisting HTML bytes should count and fans cheering the absurd ingenuity
The internet just watched someone make “Fizz Buzz”—the classic test where numbers turn into “Fizz” for 3 and “Buzz” for 5—entirely with CSS, in four lines. Minified to 152 characters, Susam Pal dropped a mic, and the comments exploded with cheers, side-eye, and a full-on byte-count brawl.
Fans loved the whimsy. One commenter celebrated “infinite routes from A to B” and predicted pedants would cry that it’s not a “real solution.” Then the shaving began: graiz boasted 145 characters by switching to <p> tags, and dsmmcken swooped in with 144 using CSS variables—complete with a CodePen. Even susam admitted a shorter trick with ordered lists if you don’t mind “untidy” output.
Cue the purists. carl_dr argued it’s “not really fair” for code golf (a contest to shrink code) if you ignore the size of the HTML that prints the numbers; after all, those bytes count. Plus, beyond small ranges, you’d need JavaScript to generate tons of list items—but JS is banned here—so reality bites.
The memes practically wrote themselves: “hold my beer, 144,” “CSS doing math,” and gentle accusations of stylesheet abuse. Art vs rules. Creativity vs purity. And yes, everyone’s counting
Key Points
- •The article sets a constraint that all Fizz Buzz output must come directly from CSS, with no JavaScript or HTML text used.
- •A four-line CSS solution uses a counter, :nth-child selectors, and ::before/::after pseudo-elements to produce Fizz, Buzz, and numbers.
- •Non-multiples of 5 display the counter value; multiples of 3 show "Fizz"; multiples of 5 append "Buzz"; multiples of 15 display "FizzBuzz".
- •The CSS can be minified by removing whitespace, resulting in a one-line stylesheet of 152 characters.
- •A working example (css-fizz-buzz.html) is provided, and the author invites readers to submit shorter solutions.