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)
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
That @apply functionality is pretty slick! Thanks for letting me know about that.
And have fun with classless CSS!