feather

Featherweb Blog

Blog index



CLassless CSS

I've known classless css for some years and was always attracted by the idea of not having to fiddle with classes. However, in my early trials, I was disappointed by the rigid character of the few classless css's I had found.

But now, few days ago, I discovered an enormous list on Github, listing and demo-ing dozens of classless projects. Hours of fun guaranteed!
Meanwhile, today I found the same list in a more nicely build website at opensourcelibs.com.

But why classless and who is it for?

From Github:

"Classless" means a style sheet does not define special classes you must add to your HTML elements to style these elements. As a result, you can style any plain-HTML page just by linking to the style sheet. This is useful, for example, in prototyping.

From dev.to:

Classless CSS Isn't Trashy

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.

Classless css is a good solution, in case:

I've been reading about and comparing the different projects and for the moment found a personal favorite: Basic.css. It is simple, intelligent, esthetic and at 1kb minified it is, I believe, the smallest of them all. To get a good look at it, I changed the css of the former post and of this post to Basic.css: