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.
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".
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
- Meaningful CSS: Style Like You Mean It
- dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots
- troxler-awesome-css-frameworks: List of awesome CSS frameworks
- No-Class CSS Frameworks | CSS-Tricks
- CSS Bed: This is a collection of classless CSS themes to use as starting points in web development
- drop-in Minimal CSS
- HTML5 elements tester: preview popular CSS resets and frameworks
Top comments (0)