Whenever I throw together a simple CodePen for a quick demo (e.g. for my text scramble animation), I usually include this single line of code.
@import url("https://cdn.jsdelivr.net/npm/yorha@1.2.0/dist/yorha.min.css")
What this snippet does is import Yorha, a Classless CSS theme.
What is Classless CSS?
Most CSS is custom-written for a specific page or site. This allows web developers to customize the content presentation (you know, the whole point of CSS), but it takes time to write and includes a lot of boilerplate.
Classless CSS is a generic, one-size-fits-all, drop-in solution that styles raw HTML elements. It’s whole purpose is to make raw HTML look nice without any effort.
My introduction to Classless CSS was cssbed.com, a neat website that demos 27 different Classless CSS themes. After trying every single one of them, I settled on Yorha as my favorite. Yorha provides a nice minimalist beige palette, sleek button hover effects, and doesn’t try to center the content.
I used Yorha for my CodePen demos so that they weren’t just plain unstyled HTML, and so that I didn’t have to spend time writing CSS for each demo (I spent enough time writing CSS as it is).
ClasslessSpearmint
Earlier today, I wondered what my website’s theme would look like as Classless CSS.
In the spirit of Classless CSS (i.e. laziness), I fed my site’s main CSS file, spearmint.css, alongside yorha.css to Gemini 2.5 Pro with the following prompt:
I’m providing you with two CSS files. One, Yorha, is classless and has a beige theme. The other, Spearmint, is not classless and has a sleek teal theme. I want you to make a new CSS file: a classless sleek teal theme. In other words, follow the format of Yorha but the aesthetic of Spearmint. Make sure that all elements styled in Yorha show up in your CSS.
It spat out 383 lines of CSS. I call it classlessspearmint.css (a fairly obvious wordplay on ‘classless’ and ‘colourlessspearmint’).
I was impressed by how good of a job Gemini did. It followed my site’s aesthetic pretty well, and also added support for a bunch of HTML features that I never use and didn’t implement, like the <mark> tag that highlights text.
Demo
I wanted to test ClasslessSpearmint out, but I think that the HTML demo on cssbed.com is a bit lackluster.
So I went back to Gemini and asked for a Classless CSS test suite. After several rounds of feedback (“Why are you using classes? That completely subverts the entire point of this exercise. Try again.”), it responded with a nice HTML page that does a good job demoing lots of different HTML elements. Also, at my request, all of the lorem ipsum text is centered around salt.
Here’s what the test suite looks like with ClasslessSpearmint applied.
If you’d like to compare them, here’s the same demo but using Yorha.
Usage
If you’d like to use ClasslessSpearmint yourself, just include this snippet in your HTML head.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ColourlessSpearmint/colourlessspearmint.github.io@latest/static/classlessspearmint.css">
Or, if you’re using CodePen, include this snippet in the CSS.
@import url("https://cdn.jsdelivr.net/gh/ColourlessSpearmint/colourlessspearmint.github.io@latest/static/classlessspearmint.css");
Conclusion
I’m undecided as to whether I’m going to use ClasslessSpearmint for future unstyled CodePen demos. It definitely fits in better with my site’s aesthetic, but I’m not sure if I prefer stylistic consistency or the minimalism provided by Yorha. Regardless, it’s pretty interesting to see my site’s entire theme compressed into a Classless CSS file.
~Ethan