What an appropriate image ... an elephant on the big top.
Bulma CSS released version 1.0.1 on May 20. It's actually larger in size than v1.0.0 ... a whopping internet-killing 714Kb. You'd think the minified version would help ... not much, the minified version of Bulma CSS v1.0.1 chokes the internet at a whopping 633Kb. The size increased ... and Bulma marketshare decreases.
Keep in mind, this is before any content. Before any text, before any images or photos, before any video or audio content. This is totally nuts.
It's easy to understand. This "open source" project is a for-profit venture. Why change it as long as donations keep rolling in.
I'm not a competitor, by the way. I am just fed up with any package that takes advantage of a glaring hole in the fabric of the internet. Any serious developer looking to create a quality website that is fast and responsive would pass on all of these bloated offerings.
Quite frankly, I think one problem with these bloated packages is based on using automated tools to created a final file ... raw or minified. In Bulma's case, it's SASS. Look through the final Bulma CSS file and you'll notice a ton of repetitive code. It's not optimized at all. Another problem is the highly opinionated approach. In Bulma's case, it is the source of frustration with many users: that of using a "reset" in Bulma that removes all formatting from all HTML tags ... and then restructures the formatting within a limited scope of use. One example of that – that you can easily replicate – any H1 to H6 tag. Build a page with just one line: any H1 to H6 tag with basic text ... actually, try it with "<body><h1>basic text</h1></body>" after loading the Bulma CSS files. What you will end up with is just basic paragraph text appearance. No heading. Now try it again, time time with "<body><div class="content"><h1>basic text</h1></div></body>". What a difference, eh? Now you get a heading with attributes that Bulma thinks is what an H1 tag should look like. Basic HTML pages are not for Bulma. You have to follow their HTML writing style.
Before anyone points it out, all CSS code is opinionated. And that is absolutely true. I do it myself. You see, my background includes a long stint in the publishing industry. I have a pre-disposition to proper display of headings, text, ordered and unordered lists, and their relative positioning and spacing. Despite this, I still think that the W3C consortium's approach is correct. And it's endorsed by all browsers. All browsers, however, choose their own interpretation of the W3C consortium guidelines. But rather than reset everything, I choose to unify all the differences to make all browsers appear the same from an HTML file. I then modify the typography to my liking. End result is a much smaller CSS file and much more consistent appearance in all browsers. It also means that you do not have to do anything "special" to use this type of css file. It's defined as "class-less". What does that mean? It means that if you use "<h1>Heading</h1>" it appears as an h1 heading. In the case of Bulma, if you want to use "<body><h1>Heading</h1></body>" after calling the Bulma CSS, you need to modify that to: "<body><h1 class="is-1">Heading</h1></body>" to get it to look like a regular H1 heading. You have to use a class to make it look like a heading, otherwise it looks like plain unformatted text. Recap:
- "<h1>Heading</h1> example:
Heading
... class-less - "<h1>Heading</h1> example:
Heading
... class-based (ie. Bulma CSS) - "<h1 class="is-1">Heading</h1> example:
Heading
... class-based (ie. Bulma CSS)
No one has actually defined categories for CSS frameworks. I think there are at least two categories:
- Kitchen-sink ... that is, they try their best to do everything Bulma and Bootstrap are "kichen-sink" frameworks
- Utility-first ... that is the CSS is broken down into elements or groups. One really good example of this is forms. Why include all the CSS necessary for forms if you are not going to have a form on your page? A utility-first CSS Framework would only call the forms CSS module if a form is on the web page.
The better strategy, though, is utility first. Although I have never used it, the concept behind Tailwind CSS is the right way to go. Only call what you need. Tailwind CSS recommends using PostCSS library to call in what you need. They also recommend an alternative, that is to use @import statements to call in only those CSS elements that are needed.
The latter is my preference.
I write PHP code, and have done that for decades. I've written my own beautifiers for CSS, JS, PHP, and HTML. I've written my own minifiers for CSS, JS, PHP and HTML. What I do now is parse HTML, identify the CSS and JS file being called, interrupt it and call it separately. I then minify the file in real time, add the appropriate starting and ending tag and return it to the HTML stream and feed that to the browser. Take that concept one step further, and identify which CSS (or JS) file is needed and call that automatically, compressing on the fly.
What I do find refreshing is that more and more people are abandoning Bulma CSS. As of June 2024, the marketshare for Bulma has dropped to 0.2%. I'm obviously not the only disillusioned user out there. To validate the concept of utility-first CSS as the right way to go, Tailwind has dramatically increased market share to 0.5%. That is a dramatic jump over Bulma. It doesn't matter how slick Bulma make their website look, it's on a downward slide. Maybe they should include the features from their new website into their CSS package?
Do yourself a favor, look at utility-first CSS frameworks. Look at class-less CSS frameworks.