Another component goes classless

by Andy Prevost

Saturday November 22 2025

I stumbled onto a site that featured a responsive horizontal card. The HTML structure for each sample card was a minimum of 458 bytes. The CSS was a total of 116 lines of code.

It was an interesting structure for both the CSS and HTML ... I re factored the CSS as a nested classless structure and ended up with a bit less than half the size – down to 56 lines of code. What was just as interesting was the reduction in HTML structure from 458 bytes down to 338 bytes (for each card). That's a direct comparison using exactly the same demo. And now totally classless. Not one single class anywhere in any of the responsive horizontal card.

This is the second card system that I now have as classless. The first is a vertical style best suited to a blog or an e-commerce site. The new horizontal style is suited to just about anything, including blogs and features.

Once you start looking critically at HTML and CSS files, it gets easier to see how transitioning to classless makes a lot of sense. And how we have been so tied up in the CSS class structure and definition. We have relied on classes, many of them unnecessary. 

Classes were supposed to make life easier. Not so for developers or content creators. We need to move back to better use of HTML and better use of CSS. 

It's not just a minimalist issue. It's more about using the latest CSS3 functionality to achieve the same results as an extensive array of classes. 

CSS3 variables and nesting functionality are encroaching on the turf of CSS preprocessors. After seeing the effects of CSS preprocessors on a variety of CSS frameworks, I've avoided them like the plague. CSS preprocessors are like programming languages ... and as such are open to misuse by developers who fail to learn how to use them properly. My issue is that a CSS preprocessor is only useful once you define the purpose of the CSS you are writing. If you do that properly, you don't really need a CSS preprocessor. I mean, that's the entire reason for nesting ... the code below applies only to that parent. A generalized set of CSS, followed by proper nesting should equal a fairly small CSS code base – supplemented by a page or site specific small style sheet.

As I've written in other articles here, I have an entire CSS framework including a responsive grid system that is around 11Kb gzip'd. And this latest responsive horizontal card system? 1.33Kb RAW! Less than 60 lines of code. 

CSS frameworks are at a stage (2025) where CMS systems were a dozen years ago. Feature rich and bloated. Feature rich doesn't mean the features are needed (or even wanted). At least one framework I have looked at has gone overboard with their bad SASS implementation. The repetition is crazy. It's at least 10x the size it should be.

Whatever you do in your CSS journey, look at your code critically. 

 

◀ Previous Next ▶

Post a Comment