I still can't figure it out. Why, why does anyone use kitchen sink CSS frameworks?
The worst of them all is Bulma. It's now at version 1.0.4 and has increased in size – again. Unminified it is 747Kb (minified it is 663Kb). There's always someone that will come to the rescue and explain this piece of sh*t framework. The base argument is that you are supposed to use it with a Javascript compiler. BS. Pure BS. It that were true, Bulma would not be available in a CDN.
What is the problem with 747Kb. Well, that is just the CSS. You still have content that includes text, images and photos, plus HTML code. You also need some type of scripting language ... Bulma can be responsive - if you use Javascript to make the navigation work.
W3C recommend pages not exceed 300Kb in total. In total – Bulma CSS already is more than double that. And the W3C recommendation already factors in compression (like GZip).
It's interesting watching the market share statistics for CSS frameworks. The most popular remains Bootstrap, but it's dropping in popularity. Bootstrap is now at 75.5% market share for websites that use frameworks. Bulma is near the bottom in popularity. In rankings, it is at 0.2% market share.
The one area that continues to show increases is in utility based CSS frameworks. As always, I recommend you use Tailwind CSS – actually, let me clarify that. My recommendation is that you make your own. If you don't want to do that (for whatever reason), use Tailwind CSS.
I've developed my own. I call is CSS Blade. "Blade" is in the name simply because it is indicative of taking a blade to bloated CSS and get back to basics. Mine is built on a classless core. Mine has absolutely everything Bootstrap and Bulma have – with one exception: no bloat. Mine comes in at a TOTAL OF UNDER 40Kb.
Working on creating new forms stimulated this article. I'm converting my previous forms from the kitchen sink CSS framework to my own CSS Blade. It just boggles my mind in doing this. Discovering that a <label> won't do anything unless you add a css class as in: <label class="label"> ... really? That goes to the very core of what is wrong with Bulma. The developers start on the basis of resetting all CSS to absolutely no values. Title tags have no effect. You can use <h1>Title</h1> and it will look identical to <p>Title</p> ... if you want the behavior of an H1 tag you have to use <h1 class="h1">Title</h1>. How dumb is that sh*t?
Here is the Bulma CSS version of a single form input with a label:
<div class="field">
<label class="label" for="Name">Name <span class="required">*</span></label>
<div class="control">
<input type="text" class="input is-normal" id="Name" name="Name" value="" required autofocus />
</div>
</div>
... and mine:
<div class="input-group">
<label for="Name">Name <span class="required">*</span></label>
<input type="text" id="Name" name="Name" value="" required autofocus />
</div>
Note mine has a class on the div and no other classes. That's as close to "classless" as you can get.
Look, it is your choice. I know I dumped the kitchen sink CSS framework and made my own. I'm always looking for ways to speed up websites and keep things as simple as possible. I know my HTML is easily reusable, the kitchen sink CSS version is not.
PS. Look up the market share statistics yourself. Just click here.