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.
Press enter or click to view image in full size
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: