I had a weird thought while building a docs page last month.

I was writing this:

<button class= "btn btn-primary" > Get started </button>

Enter fullscreen mode

Exit fullscreen mode

And I thought — why does a button need to be told it's a button? It is a button. The browser knows it. The screen reader knows it. Why doesn't the CSS?

That thought turned into classless.css — a 47 KB stylesheet that makes plain, semantic HTML look great without adding a single class to your markup.

What does "classless" mean?

The idea is simple: instead of styling elements by class names, you style native HTML elements directly.

Normal CSS library:

<button class= "btn btn-primary btn-lg" > Submit </button> <input class= "input input-bordered" type= "text" > <div class= "card card-body shadow" > Content </div>

Enter fullscreen mode

Exit fullscreen mode

Classless approach:

<button> Submit </button> <input type= "text" > <article> Content </article>

Enter fullscreen mode

Exit fullscreen mode

One <link> tag — and…