Posted on Sep 20 • Originally published at blog.logrocket.com Written by Shalitha Suranga✏️In the early days of the internet, most web developers wrote their own CSS stylesheets to structure and style web pages. Nowadays, we use pre-developed, fully-featured CSS frameworks to do this and save development time. But these frameworks won’t automatically style DOM elements using Html tag semantics because these frameworks are class-based CSS frameworks. Classless Css frameworks, by contrast, don’t define CSS classes. Instead, they automatically style your raw HTML structure based on HTML tag semantics. For example, almost all classless frameworks apply a button style for all tags. In this article, I’ll explain the concepts of classless CSS frameworks with use cases and compare ten popular classless CSS frameworks with live previews. Jump ahead:A classless CSS framework is a CSS stylesheet that styles DOM elements based on semantic HTML tags. A webpage typically consists of several HTML element types, such as headings, lists, tables, paragraphs, and form controls. HTML offers several tags to render these elements, such as the tag to create a table. Each tag indicates how the end DOM element will appear — when we use the tag, we know that the web browser will render a table. Classless CSS frameworks help you style raw HTML pages instantly without using pre-defined classes, like class-based frameworks, or even writing a single line of CSS. Moreover, classless frameworks offer various themes and CSS variables for better customization. Look at the following sample classless CSS definition for tables:The CSS frameworks we’ll cover override styles defined by the user-agent stylesheet and apply custom styles for all standard HTML tags. When you import a classless CSS framework stylesheet into a raw HTML page, you will eventually see a well-styled, modern webpage because the classless framework applies styles to all of your existing standard HTML tags.A classless CSS framework doesn’t behave like a fully-featured class-based CSS framework that offers various pre-developed components and layout structures. A classless framework defines minimal styles to apply common styles based on HTML tag names and attributes. This makes these libraries helpful in scenarios where you need to instantly style raw HTML without using dedicated classes or writing CSS sources. Here are some common scenarios where you can use a classless CSS framework:After covering what classless CSS frameworks are and the use cases they’re best suited for, we discussed how they differ from traditional class-based frameworks.However, there is another CSS framework type called class-light, which reside between classless and class-based frameworks. Class-light frameworks help you style webpages using features from both classless and class-based framework types. They not only style raw HTML pages based on semantic HTML concepts but also offer minimal classes for building layouts and coloring. Chota and Milligram are popular class-light CSS frameworks. Let’s compare these types of CSS framework in the following table:Let’s browse a few popular, well-maintained, and high-quality classless CSS frameworks with live previews. I’ll demonstrate all upcoming classless frameworks using this raw HTML page (taken from cbracco/html5-test-page), which renders every semantic HTML tag. I suggest you open this raw HTML content preview and all upcoming demo links in multiple browser tabs at once for better side-by-side comparison. New.css is a simple classless CSS framework that offers three inbuilt themes: light, dark, and terminal. It offers several CSS variables for building custom themes and customizing the current theme’s color scheme.You can install this CSS framework via your preferred Node package manager:It’s also possible to download the latest stylesheet file from GitHub or import from the jsDeliver CDN as follows:Check this CodePen and see how New.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and switch themes live. Sakura is a minimal classless CSS framework written using the Sass preprocessor language. It styles standard semantic HTML tags and offers seven pre-developed themes. You can easily adjust theme colors or build your own theme with Sakura’s CSS variables.You can easily download the latest stylesheet version from GitHub and link to your webpage — or import it directly from the unpkg CDN as follows:Check this CodePen and see how Sakura styled the raw HTML page I’ve shown you before. You can also check the official demo website and switch themes live. Missing.css is a simple class-light CSS framework that offers both classless and class-based framework features. It behaves more like a classless framework since it applies styles for every frequently used semantic HTML tag and uses CSS variables-based customization. Missing.css’s class-light features provide Flexbox-based layouts, grids, and modern pre-styled components like alerts, navigation bars, icon buttons, and more via its helper CSS classes.You can easily download the latest stylesheet version from GitHub and link to your webpage — or import it directly from the unpkg CDN, as follows:Check this CodePen and see how Missing.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and browse various sample pages. Water.css is a modern classless CSS framework that offers light and dark themes. It also offers CSS variables-based theme customization and has several extra features like dialog box support that works beyond traditional semantic HTML.You can easily download the latest stylesheet version from GitHub and link to your webpage — or import it directly from the jsDeliver CDN as follows:Check this CodePen to see how Water.css styled our raw HTML sample page. You can also check the official demo website and toggle light and dark themes live for sample HTML content. The MVP.css classless CSS framework is built specifically for creating web MVPs. It styles most modern semantic HTML tags, like and , offers better mobile viewport support, and offers all the basic components you need for a web MVP. MVP.css also offers CSS variables and a dark theme you can set separately from the default light theme.You can download MVP.css into your web projects via a Node package manager as follows:It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN, as follows:Check this CodePen and see how MVP.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and toggle light and dark themes live for sample HTML content. Pico.css is a minimalistic, class-light CSS framework that offers a dedicated classless CSS stylesheet version. It comes with pre-developed light and dark themes and CSS variables to build custom color schemes. Pico adds styles for frequently used semantic HTML tags and offers a way to create dialog boxes, sections, accordions, cards, switches, tooltips, and dropdowns with plain semantic HTML. You can structure your web layouts with or without CSS classes using the , , and tags.You can download Pico into your web projects via a Node package manager as follows:For PHP developers, Pico offers a Composer package too:It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the jsDeliver CDN as follows:Check this CodePen and see how Pico.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and browse several sample web pages styled with Pico. Simple.css is a minimal classless CSS framework that lets you create custom color schemes with a few CSS variables. It doesn’t offer manually-switchable themes, but it automatically sets a dark color theme based on the user agent’s color scheme configuration.You can download Simple.css into your web projects via a Node package manager as follows:Also, it’s possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN as follows:Check this CodePen and see how Simple.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Simple.css styles semantic HTML tags. Tacit is a simple classless CSS framework written using the Sass preprocessor language. It styles semantic HTML tags in a minimalistic way without altering them too much. Tacit doesn’t offer inbuilt additional themes except the default one, but it is easily customizable with CSS variables.You can download the latest stylesheet version from GitHub and link to your webpage or import it directly from the jsDeliver CDN as follows:Check this CodePen and see how Tacit styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Tacit styles semantic HTML tags. Almond.css, a classless CSS framework written using Sass, lets you style semantic HTML tags with HSL color scheme-based customization. It offers separate stylesheets for two framework versions: the generic version with icons and the light version without icons. It doesn’t give you inbuilt themes, but you can create custom themes with its CSS variables.You can download Almond.css into your web projects via a Node package manager as follows:It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN as follows:Check this CodePen and see how Almond.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Almond.css styles semantic HTML tags. Bolt.css is a simple classless CSS framework that comes with a few CSS variables for color scheme customization. It doesn’t offer switchable pre-developed themes, but you can use CSS variables to adjust the pre-defined color scheme. Besides, Bolt automatically applies a dark color scheme.You can download Bolt.css into your web projects via a Node package manager as follows:It’s also possible to download the latest stylesheet version from GitHub and link to your webpage or import it directly from the unpkg CDN as follows:Check this CodePen and see how Bolt.css styled the raw HTML page I’ve shown you before. You can also check the official demo website and see how Bolt.css styles semantic HTML tags.Let’s compare the above popular classless frameworks across various comparison factors:Based on the above comparison factors, we can categorize each framework into one of three use case categories:Even though I’ve categorized classless frameworks based on bundle size and features, that doesn’t mean you shouldn’t use a feature-rich classless framework to enhance a tiny webpage or Markdown-generated HTML page. A few kilobytes’ difference won’t affect webpage performance on current, super-fast networks and modern, powerful computers.In this article, we studied the concept of classless CSS frameworks and compared it with other class-based and class-light frameworks. We discussed ten popular classless CSS frameworks with live previews and compared them with various factors. Some class-light frameworks like Chota and Milligram also style semantic HTML and behave like classless CSS frameworks, even though they are advertised as micro CSS frameworks. You can browse an up-to-date list of almost all open-source classless and class-light CSS frameworks from this GitHub repository. The top classless CSS frameworks discussed in this article style all frequently used semantic HTML tags and let you attractively modernize raw HTML — just copy-paste a stylesheet CDN link to your web page and preview. You can easily customize styles with these frameworks’ CSS variables. You can also override styles with the !important flag if you want. Moreover, it’s possible to build your own classless framework using the standard semantic HTML tags specification.As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.Modernize how you debug web and mobile apps — Start monitoring for free.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Cruip - Sep 12 DugongGlobalServices - Aug 30 Rashid Shamloo - Sep 14 Safvan P - Aug 30 Rather than spending hours/days trying to reproduce an elusive bug, you can see the reproduction in seconds with LogRocket. Try it yourself — get in touch today. Once suspended, logrocket will not be able to comment or publish posts until their suspension is removed. Once unsuspended, logrocket will be able to comment and publish posts again. Once unpublished, all posts by logrocket will become hidden and only accessible to themselves. If logrocket is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Matt Angelosanto. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag logrocket: logrocket consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging logrocket will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.