Final thoughts? well, sort of.
I've finished my own CSS Framework. Through the process, I've had the opportunity to study the structure and code of most of the major CSS frameworks. That included component based frameworks, utility-first frameworks, smaller (or "micro") frameworks, as well as class-less frameworks.
All are opinionated, there's absolutely no way around that. One in particular was absolutely horrid. Unfortunately for me, it was the one I chose to use a few years back. I followed it through four version releases, fixed a bunch of serious errors and omissions, and created a ton of work-arounds to tame the beast. When you start using any framework, you are basically entrapped into continuing – your time invested in creating websites and web applications would be undone otherwise. My entrapment in this horrid framework came to an end with the latest release (fourth since I started using it). Not only did they not fix previous errors and omissions, they introduced a bunch of new ones and bloated the size to more than 3X its more popular competitive product. On seeing that last release, I decided to find a reasonable alternative, and admit I chose the wrong CSS framework a few years back.
For rapid deployment, I will use Bootstrap. I resisted using Bootstrap twice now. The first time was back when Bootstrap was fairly new ... I can't recall exactly why I made the decision on behalf of my company, but I was wrong then. The second time was a judgement call that was totally wrong. I ended up choosing an alternative (described above) based on a cursory review of the code and its marketing hype. I did not properly research the alternatives. And: Bootstrap continued its trajectory and remains the leader in component based frameworks.
Since then another alternative is available. Utility-first frameworks. Well, I'm not sure it is a new category ... essentially, it is a small core framework that includes the basics of a responsive CSS framework. You create your website or web application based on this core framework and include the components you need when you need them. That means you get a small footprint of CSS code without the bloat of component based frameworks. You see, with component based frameworks you get everything: the core and all components whether you need them or not. In this category, Tailwind is the market leader.
I'm not alone in my resistance to use what is currently available. Component based frameworks are pure bloat. Over the years, even Bootstrap has morphed into bloat. The worst bloat, of course, is that boat anchor I just gave up. Gheezus H ... that dog's breakfast now is more than 3X larger than the market leader. That's where small, or micro, CSS frameworks come in. They follow the basic concepts of utility-first frameworks ... that is a small well-written core. Where they diverse from utility-first, is they don't offer components. I think back to the past three years and realize that I ended up building my own components quite a bit of the time anyhow.
I've been at work on my CSS Framework (still no name, by the way) for some time now. When I look at the code, I see much of my new framework includes fixes I had written for the other framework. I'm actually quite proud of the grid system I came up with. It's not compatible with any other framework. I'm following the latest release of Flexbox with none of the work-arounds (for previous versions of Flexbox) used by other css frameworks. My CSS Framework also does not use any vendor prefixes. As of Oct 2021, no browser needs a specific vendor prefix (well, other than IE - IE is not even supported anymore).
My CSS Framework is currently designed similar to a utility-first framework. I have a small core that can stand alone. It's bigger than a micro framework, but also includes support (opinionated) for semantic HTML. The largest single set of properties is to support a responsive grid. The grid alone comes in at 11.9Kb raw, 9.9Kb minified, and 1.5Kb gzip'd.
When I load all the "core" including the grid, it ends up at about 30Kb raw. My entire package including all of my components ends up at about 59Kb. My components include:
- Borders
- Buttons
- Footer (simple)
- Hero
- Horizontal navigation bar
- Vertical navigation bar
When I have forms to create, I can add the Forms module that comes in at about 17Kb raw. That would bring the total to 76Kb raw for everything. Still works out to less than 10Kb gzip'd.
I'm thinking of adding an "off-canvas" module to handle tutorials ... I've designed a few websites with "help" or "tutorial" sections that float in from the right side of the screen. It's a nice feature to have.
Thanks for following along, especially during the rants on that bloated monster framework I was using. I'd suggest you download it and look at it closely: it's an interesting study. Look for the duplicates, look for "contradictory" code (that is where the default is repeated needlessly) and pure absolute junk ... and by junk, I mean look at all the wasted code replicating colors selectors with all the regular or normal code. I suspect it's just bad use of SASS ... I digress ... thank you all for following along and good luck with your own CSS adventure.