Discovering a CSS Trick

Do we create or uncover CSS tricks? Michelangelo described sculpting as removing excess to reveal the sculpture within the marble, while Stephen King likens his ideas to fossils he uncovers. Though it feels early to compare myself to such creative figures, my work on CSS-Tricks feels like “discovering,” not “inventing,” hidden synergies between CSS features, waiting to be combined in new ways.

**Connecting CSS Features**

One method for finding unexpected CSS feature combinations is recursive thinking, a concept from my engineering background. Recursive logic requires an escape hatch to avoid infinite loops, and this mindset helps me find CSS feature pairings that, though seemingly incompatible, work well together. Consider these examples from my CSS experiments:

**Acknowledging There’s Nothing New**

Mark Twain believed new ideas are illusions created by combining existing ones. Creating isn’t easy, just as knowing a safe’s digits doesn’t mean you can unlock it. This reminds me of playing Space Quest III, which humorously noted, “Remember, we did it all with ones and zeros.” While we may not sculpt like Michelangelo or create a bestselling game, understanding creators’ limits is key to unlocking creativity. CSS constraints foster creativity.

**Embracing Constraints**

When asked, “Why use CSS instead of JavaScript?” it’s like asking, “Why write poetry instead of prose?” Samuel Coleridge defined prose as “words in their best order,” but poetry as “the best words in the best order.” Poetry’s constraints force unexpected connections, similar to CSS. Artist Phil Hansen found creativity in limitations after nerve damage altered his drawing style. His work using limited supplies aligns with Antoine de Saint-Exupéry’s quote that perfection is achieved when there’s nothing left to remove.

**Embracing Nothingness**

Web design blends art and science, challenging assumptions about cause and effect. Contrary to the saying “you can’t prove a negative,” we can. Embracing limitations and removing the superfluous often reveals creations. Many of my articles challenge assumptions about necessity in producing outcomes.

**Going to Extremes**

Pushing ideas to extremes can make them new. Seth Godin’s “edgecraft” involves pushing a competitive advantage to the market’s edge. Similarly, taking an old CSS feature to new heights can create something unique. For example:

– CSS-Tricks covered checkbox and radio button hacks in 2011. In 2021, I used hundreds of radio button hacks with Pug to create a Sudoku app. Chrome dev tools struggled with too much CSS, limiting me to a 4×4 Sudoku, teaching me CSS’s capabilities and limits.

– The `:target` selector has existed since the 2000s. In 2024, I used HAML to render Tic Tac Toe’s possible states, creating a game with a computer opponent in pure CSS. CodePen struggled with the HTML volume, but it engaged newcomers more than a table of contents demo.

**Creating CSS Outsider Art**

Chris Coyier discussed the gatekeeping behind questioning if CSS is a programming language. If not considered “real” programming, it can devalue CSS experts, affecting pay and workplace dynamics. As a full-stack engineer, I felt excluded from front-end conversations. CSS’s complexity felt daunting compared to imperative coding, akin to lifting a car overhead.

My view changed with the checkbox hack, which I related to hiding and showing divs—common in my work. A designer colleague challenged me to create a game using only CSS. I made a text adventure with radio button hacks. Design experts valued my demo for its novelty. My engineering background became an asset in offering a unique CSS perspective. I was hooked.

To rewire my brain for CSS, I found analogies with imperative programming problem-solving. If learning web development and CSS makes you feel like an outsider, consider that what makes you feel different might allow you to bring something unique to CSS.

**Finding the Purpose**

When my CSS experiments were published on CSS-Tricks, the first comment on my first hack was a generic, defeatist “Why would you do that?” Other comments were supportive, and I’ve accepted not everyone will like my articles. However, I’ve mentioned the critical comment before. Hmm…

Maybe it didn’t stop me from writing for CSS-Tricks for years. When I returned, my first new article focused on accessibility, inspired by the critical comment about checkbox hacks. Limiting myself to CSS hacks that enable accessibility became inspiring. We should always consider users needing screen readers, even in experiments, embracing CSS’s and our audience’s limitations.

The negative comment lingers because I agree that clarifying a CSS trick’s relevance is important. If a CSS trick is discovered rather than made, it’s like finding a beautiful feather on a walk. Initially, we pick it up just because we can, but sharing the journey to the discovery lets others decide its significance.

It’s about sharing the journey and challenges faced when pushing CSS boundaries. By bringing others along, they might