The best classless CSS frameworks in 2021
Tags: css, html, frontend
Published: 2021-03-09 00:13:36

---
title: The best classless CSS frameworks in 2021
published: true
description: Style your semantic html with these minimalist drop-in classless CSS frameworks. Perfect for code examples, prototyping, and minimalist blogs.
tags: css, html, frontend
cover_image: https://www.skypack.dev/blog/wp-content/uploads/2021/03/Design-2-01-2021-19.57-PM-copy-copy-copy-2048x1152.png
canonical_url: https://www.skypack.dev/blog/2021/03/the-best-classless-css-frameworks-in-2021/
---
Ever need style for some plain HTML? Then classless CSS frameworks are for you. I started using these when working on code examples for our [Best Date Libraries](https://www.skypack.dev/blog/2021/02/the-best-javascript-date-libraries/) post. The plain HTML examples looked distractingly ugly, but writing I didn't want to write any CSS. I found [Sakura](https://github.com/oxalorg/sakura), a classless CSS framework. With just one CSS file my examples looked far more polished. And I didn't have to change the HTML at all.

![before and after of applying Sakura classless CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhhyvo3ofp1jra1n64x2.png)

## What is a classless CSS framework?

Classless CSS differs from other types of CSS frameworks that target classes. For example, with [Bootstrap](https://getbootstrap.com/) (the most popular traditional CSS framework) you need to add `class="blockquote"` to your `blockquote`s to style them. Or [WYSIWYG.css](https://jgthms.com/wysiwyg.css/), a "class-light" CSS framework. WYSIWYG.css targets basic HTML elements, but only within a container with `class="wysiwyg"`.

![Shows a little character with an html face and a classless framework hat saying "no class no problem" surrounded by a regular blockquote. A disappointed html character with a traditional framework hat says "they've got style but they don't have class" inside a blockquote with a blockquote class](https://www.skypack.dev/blog/wp-content/uploads/2021/03/Design-3-02-2021-17.51-PM-copy-2048x1152.png)

## Who are classless CSS frameworks for?

Classless CSS frameworks are ideal for demos, proofs of concept, minimalist sites, and code examples. 

Beyond that, their lack of precision limits design options and can override other CSS, making a larger site design look weird. Furthermore they don't offer much contextual flexibility. For example let's say you want to have headers look different when used on a sidebar vs. the body of a blog post. It's also almost impossible to have a layout beyond a basic single column without using classes.
## Testing classless CSS frameworks

We picked [eleven classless CSS frameworks to test in Codepen](https://codepen.io/collection/XyWVxw?cursor=ZD0xJm89MSZwPTEmdj0z). Want to see what they look like when applied to the same page? Toggle them in our Classless CSS Tester Codepen:

{% codepen https://codepen.io/melissamcewen/pen/WNoweNg %}

## Our favorite: [Sakura](https://github.com/oxalorg/sakura)
I ended up picking [Sakura](https://codepen.io/melissamcewen/pen/vYXMvaX) for use in examples in Codepen. Sakura covers most HTML elements I use in examples such as headers. Most importantly, Sakura makes HTML look tidy and readable, but isn't distracting.

{% codepen https://codepen.io/melissamcewen/pen/vYXMvaX %}

## For prototyping: [MVP.css](https://andybrewer.github.io/mvp/)

If you're building a prototype, [MVP.css](https://codepen.io/melissamcewen/pen/mdrYWEJ) is a great choice. MVP.css allows you to construct basic user interfaces with plain HTML. If you're at a hackathon or just hacking a side project, check this one out:

{% codepen https://codepen.io/melissamcewen/pen/mdrYWEJ %}

## For bloggers: [holiday.css](https://holidaycss.js.org/)

If you're building a simple blog and want basic style, [holiday.css](https://codepen.io/melissamcewen/pen/qBawGwP) looks clean and styles the semantic elements commonly used in writing. Plus it has a cool dark mode!

{% codepen https://codepen.io/melissamcewen/pen/qBawGwP %}

## What to look for in a classless CSS framework

### Readability

Ideally, a classless CSS framework should make text much more readable. Some things to look for are:

- Spacing: Does the framework use spacing to improve readability and convey hierarchy?
- Fonts: Does the framework use fonts designed for the web? For example [Why You Don’t Use Garamond on The Web](https://designforhackers.com/blog/garamond/) explains why some fonts aren't suited for use on websites. Are the font sizes readable and do they have a clear hierarchy? That can be complicated to judge but I like the pointers laid out in [The Responsive Website Font Size Guidelines
  ](https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html).
- Color contrast: Color can make a difference in how legible text is. Check out the accessibility section for more on this.

### Coverage

It's worth thinking about what HTML elements you want to style. Not all frameworks style the same elements. When I write blog posts I like to use the [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) element for tips and other tangential information. Many classless CSS frameworks do not style asides, which makes them look like part of a paragraph. On the flip side, there may be elements you do not want to style. MVP.css styles `<section>` elements which might be confusing on a blog.

### Size

Most classless CSS frameworks are small, ranging from 1.3 to 5.1 kb. The exception is those that use custom fonts. Classless css frameworks that use @import for custom fonts are usually around 200-600kb. You have to decide whether those fonts are worth their size.

### Theming

A classless CSS framework can be as simple as a single CSS file, but others use tools like SASS that output CSS as part of a build process. The advantage of the more complex tool chain is the ability to "theme" the final output. For example, with Sakura you can create your own theme by changing variables in a SASS file. [Holiday.css](https://holidaycss.js.org/) has both light and dark modes and switches based on [`prefers-color-scheme`](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/).

### Accessibility

Is CSS really part of accessibility? Definitely! Let's take the humble `<a>` element for example. If only styled with color, colorblind users may not be able to distinguish links from regular text. WebAIM's [Links and Hypertext guidance](https://webaim.org/techniques/hypertext/link_text#uninformative) recommends styling links with an underline. And if links aren't underlined, have higher contrast and hover effects. For further reading on this topic see the WebAIM [Contrast and Color Accessibility guidelines](https://webaim.org/articles/contrast/).

Some other common CSS accessibility issues:

- Color contrast is too low — for example light blue text against a slightly less light blue background.
- User interface elements difficult to use — such as buttons that are too tiny to click.

### Style

Do you want to go for a minimal look or a more stylish sparkle ✨? Most classless CSS frameworks are minimalist. But there are a few with a distinctive style like [Tufte.css](https://codepen.io/melissamcewen/pen/poEmeea), based on the work of data visualization pioneer Edward Tufte.

## Resources

- [Meaningful CSS: Style Like You Mean It](https://alistapart.com/article/meaningful-css-style-like-you-mean-it/)
- [dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots](https://github.com/dbohdan/classless-css)
- [troxler-awesome-css-frameworks: List of awesome CSS frameworks](https://github.com/troxler/awesome-css-frameworks)
- [No-Class CSS Frameworks | CSS-Tricks](https://css-tricks.com/no-class-css-frameworks/)
- [CSS Bed: This is a collection of classless CSS themes to use as starting points in web development](https://www.cssbed.com/)
- [drop-in Minimal CSS](https://dohliam.github.io/dropin-minimal-css/)
- [HTML5 elements tester: preview popular CSS resets and frameworks](https://alexandersandberg.github.io/html5-elements-tester/)