Can you write a nice-looking website without adding classes or IDs to your HTML? That's exactly what classless CSS promises, though in practice you'll find you'll likely need to add some customization to get it just the way you want.
What is Classless CSS
Classless CSS is a design philosophy that adds properties and property values to type selectors only. A type selector is an HTML tag, so something like h1, p, form, div, etc.
Since every HTML element has a predefined style, a plain HTML doc will look good once the classless CSS stylesheet is linked.
How to Get Started
There are several classless CSS stylesheets available for use, and these are often times linked to your HTML document via a Content Delivery Network. Basically, there's a stylesheet stored on a server that you can link your HTML to. Below are a few options, and their websites are demos for what the stylesheet will do to plain HTML:
Water.css
New CSS
AWSM CSS
Style CSS
Writ CSS
There are many others out there, which can be found by searching for classless CSS stylesheets.
Create Your Own Style
Another option is to build your own classless stylesheet for reuse in your future projects. We all have our own style, and it's often easier and more satisfying to work with something you've crafted.
One way to go about this, is that you can download an existing classless stylesheet and tweak it to your liking.
Scott Tolinski of Syntax.fm podcast fame also teaches a course on building your own classless CSS stylesheet from scratch. His Level Up Tutorials course, Modern CSS Design Systems, covers this topic in much more detail.
Top comments (4)
While I don’t necessarily use classless CSS on my whole website, my new portfolio’s projects and blog sections will be using Tailwind’s Typography plugin and its prose class, which makes use of classless CSS. I have to say, I absolutely love it. I just apply the class, and boom! The posts looks great!
Thanks for sharing. I haven't tried Tailwind yet, but thought it was similar to Bootstrap. From what I understood, Tailwind styles apply to your HTML where ever you use the Tailwind classes.
Classless CSS is different in that it doesn't even require this. The stylesheet would apply a typography style directly to the p or h1 elements, things like responsive text sizing, centered text, etc. So there's no need to memorize or add classes.
The classless CSS stylesheet is basically like a theme template if that makes sense. Just link it to your HTML and voila!
Here's a link to a demo website for the Water CSS stylesheet to see a classless stylesheet in action:
Water CSS
Classless CSS sounds pretty fun to do yeah! I feel like bigger websites might not be able to use it though. I might try building a complete-ish website using it 🤔
By the way, I also thought Tailwind was similar to Bootstrap, but it’s really not. Especially if you use its PostCSS features, as you can @apply their classes to elements or other classes:
I had a much better time with Tailwind than Bootstrap personally. I will try out classless for sure though!
That @apply functionality is pretty slick! Thanks for letting me know about that.
And have fun with classless CSS!