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.