Software development can be a struggle between form and function. With many developers, function takes the driver’s seat, while the aesthetics of an application are lucky to have a seat in the vehicle. Rational minds might say, “Well, what does it matter how it looks? As long as it works right?” but great design isn’t always rational; it’s emotional.

Many developers look to supplement their design deficits with style libraries like Bootstrap, Tailwind CSS, and Bulma to evoke strong user emotions. These are great initial options, but they typically are temporary substitutes for greater ambitions of bespoke design systems. Style libraries can also stand in the way of evolving a UI to meet user needs since they heavily rely on library-specific HTML, JavaScript, and CSS classes. Removing these dependencies is unlikely once they find their way into your codebase.

To my surprise, there have been a few attempts to give developers a strong design starting point while leveraging HTML’s existing semantics and foundational elements. This movement is known as “No-class Frameworks”.

In general, No-class frameworks force developers to write semantically appropriate HTML while limiting the need for CSS classes in the markup. The libraries do their best to use the HTML markup to style around standard practices.

This post will look at MVP.CSS and some examples of styled HTML elements. Then, we’ll discuss the advantages and disadvantages of using a no-class framework in your application.

MVP.CSS - a No-class framework

As the name suggests, MVP.CSS is a style library designed to help developers build web pages for their minimal viable product (MVP) projects. The MVP is a common practice in tech circles to build a functional product while only including the bare essentials feature set. As the name suggests, the library’s aesthetics are muted and restrained but better than what you’d get if you used nothing.

To get started with MVP.CSS, add a single no-build stylesheet to the page’s header.

<link rel="stylesheet" href="https://unpkg.com/mvp.css"> 

In a feature grid on the site, MVP.CSS boasts that it is mobile-friendly, works out of the box, easily customizable, and only operates on semantic HTML.

Let’s see what a styled table’s HTML looks like.

<table>
    <thead>
    <tr>
        <th></th>
        <th>Col A</th>
        <th>Col B</th>
        <th>Col C</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1</td>
        <td>Cell A1</td>
        <td>Cell B1</td>
        <td>Cell C1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Cell A2</td>
        <td>Cell B2</td>
        <td>Cell C2</td>
    </tr>
    </tbody>
</table>

This approach applies to many common HTML elements, including headings, forms, navigation, quotes, and lists.

While the initial white and blue color scheme might suit most situations, MVP.CSS allows library consumers to modify the visual rendering with global CSS variables. After loading the library, you can control background, primary, and secondary colors and font choices by modifying the following rule in a custom stylesheet.

:root {
    --active-brightness: 0.85;
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color-accent: #118bee15;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-link: #118bee;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-table: #118bee;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}

The Advantages of No-Class Frameworks

There are several advantages to using a No-Class framework, some obvious and others less so.

Less Stuff

Semantic HTML leads to smaller payloads for the client, and the parsing of CSS and HTML required to create the CSSDOM and DOM is significantly less work. That leads to consistently faster pages and better user experiences.

Simplified Markup

If you’ve worked with any CSS framework, you’ve likely spent significant time in the documentation. With No-Class frameworks, your HTML will render as you expect without additional classes or markups.

No Build Tools

In most cases, since there is a limited number of HTML elements, most No-class frameworks don’t require any build tools. The build tools in the JavaScript ecosystem can be a frustrating experience, especially for developers working in other ecosystems.

Simple Exit Strategy

When you’ve decided you need more from your UI, you have a great starting point to style existing HTML without the tedious work of extracting the previous styles and framework-dependent HTML.

Embrace the CSS Platform

Other approaches may be seen as fighting against the HTML and CSS platform by jamming design-oriented classes into the document. No-Class tries to stay closer to the platform, letting you take advantage of modern CSS rather than treating CSS as an intermediate language.

Disadvantages of No-Class Frameworks

No-class frameworks aren’t all rainbows and unicorns, as they have definite drawbacks. We’ll point these out in this section.

Limited HTML Components

While an extensive list of HTML components is in the HTML specification, they are limited. If you’re building a unique web experience, you’re likely to hit this limitation sooner than later.

Minimal Layout Options

The ethos of these frameworks is around common style patterns, which don’t offer many visual options. The lack of bells and whistles can make pages feel repetitive. CSS grids and Flexbox can provide options that work well with semantic HTML.

Bring Your Style

You’re out of luck if you seek guidance around a cohesive color palette and iconography. The missing style guidance can feel like being back at square one for many folks who think a style library aims to make these kinds of decisions for them.

Conclusion

This post was inspired by a 2020 blog post by Chris Coyier, and while the blog post is a few years old, the message of leaning on the web platform has never been more critical. With No-class frameworks, developers can ship lightweight user experiences that work for a wider audience without the burden of heavier CSS frameworks.

The advancements in HTML and CSS have never made it more possible to build familiar experiences without the burden of past limitations. If you’re starting a new project, I recommend starting with a No-class approach and seeing how far you get. Even if you reach for another library, you’ll have begun in a much simpler place and better appreciate how far you can get with so little.