DEV Community

loading...
Cover image for The best classless CSS frameworks in 2021
Skypack

The best classless CSS frameworks in 2021

Melissa McEwen
Developer Advocate at Skypack
Originally published at skypack.dev ・5 min read

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 post. The plain HTML examples looked distractingly ugly, but writing I didn't want to write any CSS. I found 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

What is a classless CSS framework?

Classless CSS differs from other types of CSS frameworks that target classes. For example, with Bootstrap (the most popular traditional CSS framework) you need to add class="blockquote" to your blockquotes to style them. Or 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

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. Want to see what they look like when applied to the same page? Toggle them in our Classless CSS Tester Codepen:

Our favorite: Sakura

I ended up picking Sakura 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.

For prototyping: MVP.css

If you're building a prototype, MVP.css 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:

For bloggers: holiday.css

If you're building a simple blog and want basic style, holiday.css looks clean and styles the semantic elements commonly used in writing. Plus it has a cool dark mode!

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 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 .
  • 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> 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 has both light and dark modes and switches based on prefers-color-scheme.

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 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.

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, based on the work of data visualization pioneer Edward Tufte.

Resources

Discussion (0)