The Next CSS Frontier — Classless

5 min readApr 8, 2019

tl;dr — check out some classless CSS themes at cssbed.com

What do you mean by “classless”?

If you look at popular CSS frameworks you’ll notice that to do anything with them, you have to add the right “class” attribute to your HTML elements. For example, here’s a Bootstrap button:

<button type="button" class="btn btn-primary">Primary</button>

A classless CSS framework does not require any use of classes. You get all the styling by using the HTML elements you already know and love. That translates to:

<button>Primary</button>

Why care

Classless frameworks are smaller because they don’t mention classes, and don’t pile custom widgets.
Classless is easier because you don’t need to look up the docs to find out which class does what. You just use standard HTML. Is the class “btn” or “button” in this one?
Classless start you off prettier than the mega-ui-frameworks because they’re designed for the plain html scenario.
The downside is you might have to bring in some of your own widgets. E.g. a shape-shifting menu bar. Are you sure you need a shape-shifting menu bar?
Classless frameworks are not just for communists. But I imagine communists would enjoy them even more.

The rest of this blog post is a condensed history of CSS as background to my prediction of classless frameworks overtaking the big incumbent frameworks.

1996

The CSS 1 specification was completed. Microsoft’s Internet Explorer 3 was released, featuring some limited support for CSS.

2003

When I first start saw the CSS Zen Garden I was taken aback by the power of CSS. A given page can look completely different with a change of a loosely attached file. Here’s a snapshot of what it looked like in 2003.

Some designs aged better than others. The designs don’t generalize to anything other than the exact HTML used in the garden.

2004–2007

Each browser defaulted to a different set of CSS rules. Designers seeking visual consistency like Tantek Celik published “CSS undo” snippets which prevented odd appearances. The most popular of these snippets was Eric Meyer’s CSS Reset. Another popular reset was this tiny, slow and not that useful bit:

* {
    padding:0;
    margin:0;
}

2011

August 19, 2011, Twitter released Bootstrap and I loved it. A drop-in solution to make my site not ugly. bootstrap-1.0.0.min.css weighed in at 32 KB.

Around this time started the next evolution of CSS resets — normalize.css.

2019

Today, bootstrap feels like a hassle, weighing in at 210KB (JS+CSS). Even if I ignore the file size’s effect on the wire, just wrapping my head and browser around the giant rule complexity is a chore. Other UI frameworks have a variety of scope, but they all come with a seemingly unnecessary learning curve. It can be an uphill battle to get existing widgets to work alongside whatever else I’m trying to build. So I often end up opting for a simple CSS reset, even though CSS resets start me off at an ugly page.

Not anymore.

Today we have alternatives. I was inspired by a hackernews post about Water.css to build a gallery of these alternatives. I call it “CSS Bed” because it’s the basic (bedrock bottom, what you build on) and easy CSS test bed. Here’s what it looks like:

You can easily click between the themes, see the same HTML rendered in the different styles and get at their snippets. I even threw in Bootstrap to see what it looks like without the classes. It’s perhaps odd that Bootstrap affects styles when no class attributes are mentioned, but it does.

The Future

We’ve circled back to the roots of CSS frameworks. Small and simple snippets to make our page consistent and pretty.

Folks that design everything from scratch will still use CSS resets.

Folks that don’t will use one of the mega-ui-frameworks only if they need many of their widgets or grids. Very soon the grids themselves will become unnecessary as well. Currently we’re at 92% market share for CSS Grid Layout. So I know when I want to start something small and simple — I might as well base it on one of these classless frameworks. I predict many will change their defaults off the mega frameworks and onto classless. Alongside that we’ll see more “CSS Widget Gallery” collections from which you can take a single widget instead of the “million widget combo” we see today.

The rest, the vast majority, will start their projects with a classless framework.

Please mention or make a pull request with other classless frameworks you love and I’ll add them to CSS Bed. You can visually compare the best classless CSS frameworks I know at:

https://www.cssbed.com

References

Edit 2020–05–10 — Aside from cssbed.com you might find useful these classless galleries:

https://dohliam.github.io/dropin-minimal-css/ — dropdown gallery.
https://github.com/dbohdan/classless-css — screenshots gallery.