The Future of Web Styling: Classless and Class-Light CSS

Style your websites productively with no or fewer CSS classes

With the invention of WWW (World Wide Web), Tim Berners-Lee demonstrated a complete working website with an HTTP server and a web browser. He also invented the first version of HTML by using it to write the first website. Early websites typically used only semantic HTML tags to implement textual documents with hyperlinks. Each HTML tag gave the meaning of the final result on the screen, so HTML was known as a semantic markup language at its inception. However, existing semantic tags and attributes couldn’t build a properly styled web page alone, so another language was needed to describe styles of semantic HTML.

In 1994, Håkon Wium Lie invented CSS (Cascading Style Sheets) to add extended styles for semantic HTML-based documents. Developers started writing CSS libraries with pre-developed CSS classes to help web developers style HTML pages without writing long CSS source files themselves. As a result, nowadays, most front-end developers style their web pages with fully-featured, class-based CSS frameworks like Bootstrap, Tailwind, Materialize, etc.

These frameworks helped developers to skip writing CSS for general styles, but, then they had to memorize so many CSS class names. The classless CSS framework concept uses HTML tag semantics for styling and styles web pages automatically without using specific class names in HTML documents. On the other hand, class-light CSS frameworks use the same classless concept but with a few layout, utility, and component classes. In this story, I’ll explain how classless and class-light CSS frameworks offer a better styling technique for futuristic web pages!

What Are Classless and Class-Light Frameworks?

Class-based CSS frameworks offer various classes to define layouts and components, so we typically use pre-defined class names with standard div tags. Then, the library applies styles to those div tags based on the framework styling specification. A standard class-based framework doesn’t usually tend to style a raw HTML page without using specific class names in HTML. Classless frameworks apply styles to raw HTML pages without using specific class names.

Classless CSS frameworks use HTML semantics to apply styles. For example, they add table-specific styles for every place you use <table> and other table-specific tags, such as <th>, <td>, etc. Classless CSS frameworks use CSS variables to implement multiple color schemes and let developers build their own. See how the New.css framework defines styles for HTML tables using the table selector and CSS variables:

Some classless frameworks turn standard HTML tags/elements into futuristic web application components. For example, see how the Water.css classless framework turns a details-summary segment into a modern accordion component:

Also, these frameworks implement automatic light/dark themes and responsive views. These features motivate developers to use classless CSS frameworks for styling personal websites, blogs, markdown-rendered HTML, and prototypes.

Web applications typically need to use layouts, so developers had to write additional CSS with classless frameworks. As a solution, modern class-light CSS frameworks included layout support with the semantic classless concept and offered a lightweight, productive CSS library for styling web applications.

Drawbacks of Popular Class-Based CSS Frameworks

Class-based CSS frameworks offer fully-featured components and layout support for styling large-scale web applications, but they have several drawbacks. The codebase size typically grows with features in any software development scenario, so class-based CSS frameworks are heavier than classless and class-light frameworks. The following table shows the file size information of a few class-based CSS frameworks:

Since the uncompressed file sizes are high, CPU and RAM usage can also increase. Tailwind and Bulma-like frameworks come with modular features for reduced bundle size, but those frameworks need additional processor programs (i.e., Tailwind requires the Tailwind builder program) to be installed in developer computers.

Class-based frameworks offer many pre-developed components for every general use case, but, they come with hundreds of class names, so developers should remember or copy-paste them from online templates. When you migrate to another class-based framework, the migration process involves re-writing existing HTML class attributes and learning new CSS class names. See the following screenshot that displays Bootstrap button class names with previews:

Class-based CSS frameworks typically require a long learning time and may become unusable for scenarios where you can only have raw semantic HTML (i.e., markdown-generated HTML).

How Classless and Class-Light CSS Frameworks Perform Better

Classless CSS frameworks are lightweight since they simply style available semantic HTML tags without offering so many pre-developed components. For example, the Sakura CSS framework size is about 1.5 kb when gzipped (about 2.5 kb when minified). Class-light frameworks are also lightweight as they offer a few class names. For example, the Milligram class-light framework weights 2kb when gzipped (about 8 kb when minified).

You don’t need to memorize any CSS class name while using classless frameworks — you only need to remember a few class names with class-light ones. Migrating to another classless or class-light framework is a piece of cake. You can also avoid using class-light frameworks’ class names by using a third-party layout library like Simple Grid or writing your own with Flexbox (or CSS grids) along with a classless CSS framework. However, class-light frameworks offer inbuilt 12-column grid systems with a productive syntax. For example, the Chota class-light framework automatically sets column size as Bootstrap does, as shown in the following screenshot:

A file with a lesser download size typically extracts a file with fewer bytes, so the browser gets a relatively small CSS file for parsing and caching. As a result, CPU, RAM, and disk usage gets reduced for classless and class-light framework-based web pages.

Classless frameworks may not be suitable for building web apps because of the missing layout and utility class support, but class-light frameworks offer enough features for building any modern web app with mobile responsive support. Chota-like modern class-light frameworks offer pre-developed, minimal, class-based components, such as tabs, cards, tags, etc.

The Future of Web Styling Is Not Class-Based!

In the past, every web app typically asked for so many inputs with the traditional form-filling concept. Later, web developers separated large forms into several steps using improved UI/UX concepts to help application users. Nowadays, most web apps strive to reduce time-consuming form-filling scenarios with SSO (Single Sign-On), third-party authenticators (i.e., log-in with Google), AI-powered suggestions, and reduced data collection strategies. The future web is trying to reuse existing data and eliminate excessive data collection.

On the other hand, the same story happens with the software development industry — modern software development also goes toward reducing the developer’s workload by minimizing the number of keystrokes. Today, we have DevOps principles, AI-powered code generation, productivity-focused code editors, etc, for improving developer productivity.

In this era, we don’t need to remember hundreds of CSS class names to style a web page.

Classless and class-light frameworks put the foundation for futuristic web styling using an HTML semantics-first styling concept. Web browsers also support this concept by standardizing more semantic HTML tags targeting futuristic web apps. For example, the HTML <dialog> tag came with modern browsers, and the Pico and Water.css frameworks style it as a modal popup.

The future of web styling is not class-based. Modern developers need quick ways to style web pages without playing with hundreds of CSS classes. Classless frameworks override the user agent stylesheet for better visuals. Class-light frameworks offer minimal, productivity-focused CSS classes for web apps with classless features. In the future, we may see more modern standardized semantic HTML tags and more intelligent classless CSS versions. Imagine what will happen to reputed class-based CSS frameworks if browsers standardize modern semantic tags targeting web apps and CSS attributes for customizing native semantic form elements (i.e., accent-color of buttons, radio buttons, etc.). Then, the web app styling process becomes just linking a classless stylesheet —or using a few classes with a class-light framework.

Conclusion

In modern programming, everyone tries to save time by re-using existing things. We use pre-developed software frameworks, libraries, editor plugins, and cloud management tools to save time. Similarly, classless and class-light CSS frameworks help developers style web pages with minimum effort, compared to heavy class-based frameworks. They also perform better than class-based CSS frameworks from the performance perspective. Classless and class-light CSS frameworks can replace popular class-based frameworks with the help of modernized HTML semantics.

On the other hand, standard browsers also try to boost developer productivity by offering developer-focused, inbuilt browser features. These modifications can deprecate existing libraries. For example, the standard Sanitizer API will replace popular third-party sanitizer libraries soon. What if browsers standardize a common, improved user agent stylesheet with automatic dark-light theme support? What if they introduce native HTML controls for modern web app components that currently need custom CSS-based implementations (i.e., toggleable switch)? — with inbuilt layout support? Then, we don’t need any third-party CSS frameworks — our own classless CSS file can style a web page instantly in the optimal performance-first way. However, we still live in a minimalist classless, and class-light (aka micro CSS) framework era where class-based CSS frameworks lose popularity.

Browsers introduce new standard inbuilt web APIs to boost developer productivity and reduce app bundle sizes. The following story explains several new web APIs that every web developer should know:

Thanks for reading.