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.