The articles just don't make sense. They sound like they do, they read like they do ... but until someone properly defines categories of CSS Frameworks, the articles CAN'T MAKE SENSE! Period.
That's even true of the market share statistics that are available. According to the market share statistics, Bootstrap is the number one CSS Framework of all sites that use CSS Frameworks. By a wide margin too. Bootstrap, according to the statistics, has almost 80% market share.
Where it stops making sense is when you consider that Bootstrap is being compared to class-less CSS Frameworks. That's comparing apples and oranges, it just doesn't make any sense at all.
Let's get a few things straight: we're talking about CSS Frameworks that are considered "responsive". If you use a CSS Framework today and it does not support some sort of responsive capabilities, you are wasting a lot of time. This is like the old days where designers had to factor "browser" compatibility into their designs. The ideal, of course, was the ability to support Netscape (replaced now with Firefox), Chromium, Internet Explorer (to be replaced with Edge), Opera, and Safari. The hoops we had to jump through to get a website rendering well on all these browers was extreme. In 2024, browsers are well behaved and support CSS3 and HTML5 ... and we don't have to jump through hoops. We don't even have to use vendor prefixes any more (since about Oct 2022).
It's user preferences we have to be compatible with. That is the user's preference for their viewing experience. We still have to support large format screens (wide TV's, display screens, etc.), desktops, several sizes and orientations of tablets, and several sizes and orientations of cell phones. There are still a few frameworks kicking around that use floats to be responsive. They are getting rare and they are not that easy to use.
Flexbox was introduced to provide developers a responsive "grid" type of system that is far easier to use than the old floats. Flexbox is a work in progress, it's been through three major releases, each addressing short-comings discovered through usage. As of the writing of this article, there is still one major flaw in flexbox that has developers creating work arounds. That is "gaps" .... the flexbox "gap" property works in limited circumstances. So limited, that it is better to not use it at all and come up with a work around. It works when flex-wrap is set to "nowrap" only. Change that to "wrap" and all gaps fail. It's a known anomaly. I hope they fix it in an upcoming release ... it would make life so much easier.
There now is a new responsive technology called "Grid" available. Rather than go through comparing "Grid" and "Flexbox" ... it's best to just state that there is no decision to make: use the two together. Flexbox is great at columnar data and Grid is weak at columnar data. Grid is great at tabular data where Flexbox is weak with tabular data. But they do both work well together and can create some extremely complex layouts. I don't particularly create such complex layouts and, for now, will stick with Flexbox solely.
Back to our "what's best" dilemma.
I'm going to suggest that there are several broad generalizations we can make about CSS Frameworks.
- Component-based frameworks. This is where we find Bootstrap, Bulma, and a few others. Bootstrap, of course, is the overwhelming leader in this category. Quite frankly, my opinion is that it should be the sole CSS Framework in this category. Nothing else even comes close.
- Utility-based frameworks. This is where we find Tailwind. Tailwind has a core "foundation" of classes and then offers components as "modules" a designer can include with post processing (Tailwind recommends PostCSS) or manually with a loader (using @import statements).
- Micro frameworks. This category is fairly new, meaning within the last three or four years. Designers and website builders (including me) are getting fed up with frameworks that control everything and the bloat. We end up spending more time on "fixes" and "work-arounds" to start considering micro frameworks as a better alternative with more time spent creatively on design and building. The two leaders in micro frameworks are Pico.css and Chota.css. I personally favor Chota.css. Both Pico.css and Chota.css have responsive grids ... in my look at both, I would suggest that Chota.css has a more rounded out view of responsiveness and implements that through use of flexbox. Chota.css does not have expansive responsive support (they lack offsets, ordering, column alignment and justification. Pico.css is even more basic.
- Class-less framework. It's a stretch to use "framework" within this category description. Most class-less packages do not include any responsive grid system of any kind (floats, flexbox, or grid). They focus on the semantic use of HTML tags and provide compatibility between browsers and display of some HTML tags. Most class-less frameworks are under 10Kb ... and typically are built atop of a "normalizer". I've looked at several class-less packages, the only one that is worth mentioning is Simple.css.
It's probably an algorithm directing traffic to review sites, but search for best micro css framework and you'll end up with the top listings as anything but micro-based frameworks.
What it really boils down to is how much control you want to exercise over your own projects. If you are looking for a quick development process with most of the look and feel of your project determined by the CSS Framework you use, then a component or utility based framework is what you want and what you should be using. Ditto if it is a one-off project and investing in creating your own CSS tool box would be a waste of time.
I am mainly a software developer. As such, my career has been based on creating reusable code components for rapid development. In software development, that means creating user defined functions and user defined classes. That creates my own "code" framework ... where I have a "boilerplate" type of system for my software development process.
I see an identical need for a CSS Framework and boilerplate for creating websites and web applications. My first open source projects used tables and floats. Not so practical today ...
I started using Bulma CSS Framework several years ago. It was far more comprehensive than I expected, but it also meant that I could deploy a lot faster too.
I'm starting over though. For a component based CSS Framework, I now choose Bootstrap. For a utility based CSS Freamework, I now choose Tailwind. But, ultimately, the plan is to use a modified micro framework (Chota.CSS) and a class-less framework (Simple.css).
Quite specifically this means that I am abandoning Bulma CSS Framework. I should have looked at Bulma more closely, but I drank the kool-aid and trusted the hype built around Bulma. I find it disappointing to discover class names and properties that are thoroughly useless and repetitive. The latest example is the grid fractional class names like "is-one-quarter". That's just doubling-up on syntax. "is-one-quarter" is identical to "is-3". Completely identical. The only fractional class names that are not duplicates is the "-fifth" and "-fifths" class. All others are duplicates. Now, this is where the language used by Bulma developers is deceiving. They call it "curated" ... this fractional class names example itemized above is clearly NOT CURATED. That wouldn't pass muster with anyone reasonable looking at building a package. That's probably why no one else with a CSS Framework offers anything like it.
For component based CSS Frameworks, use Bootstrap. You have the benefit of having a ton of templates available. Significantly more than any other package. You'll be finished your project a lot faster.
For utility based CSS Frameworks, use Tailwind. Ditto on the number of templates, plus there are also a lot of components and utilities available to suit your needs.
If you are in this for the long term, use a micro based framework combined with a class-less framework. Your projects will be far more portable under your own control.