Your first example of vanilla code is still bloated trash, because you are sharting classes at everything for no good reason. Especially any time the past fifteen years that the child combinator has been real world deployable.

Only thing there that warrants a class is the outer container. The innermost DIV is also trash, since that should be the appropriate depth HEADING.

That's why BEM is as dumbass as Failwind or Bootcrap.

The big point you kind of missed is that it also means the "screen media F*** everyone else" mentality. Emphasis on the "mental". To that end failwind, bootcrap, and their ilk are monuments to 1997 development practices. It's using classes to recreate everything that was wrong with HTML 3.2

Thus your second vanilla example is equally incompetent nonsense too. class="btn-blue" is stupid because you're saying what colour you want it. That has NO business in your HTML. Just as idiotic classes like "btn" on a freaking button tag is garbage.

As I've been saying for well over a decade and a half, if you don't realize that:

<div class="text-center text-400-red text-lg">

Is the same broken presentational crap mindset as:

<center><font color="red" size="+2">

You have utterly and totally failed to divine HTML and CSS' purpose, and every advantage CSS exists to give us. Thus classes like "btn-blue" and "btn-red" are the EXACT SAME GARBAGE as failwind. Say what things are or why they might get a style, not what that style is.

Thus by the time you get to your “card” you’ve got a slew of “classes for nothing” as no competent HTML/CSS developer would/should be writing more than:

<section class="card">
  <img src="some-image.jpg" alt="Some image">
  <div>
    <h3>Some title</h3>
    <p>Some text</p>
  </div>
</section>

For that. Guessing on the appropriate heading depth. There is not a single blasted thing you’d be doing in that card to warrant taking a steaming dump all over it with classes the way you showed. Perfectly good outer class, work from that.

Yours              "properly"
--------------------------------------
.card-image        .card > img
.card-content      .card > div
.card-title        .card > h3
                or .card > *:first-child
.card-text         .card > p

The card > *:first-child being for if you cannot predict the used header depth. Get it? You don’t have to drop your trousers and evacuate yourself all over the markup!

And I think you meant the huge library is HARDER since it's more to learn, more code to write, etc, etm.

You also missed that the performance hit actually has little to do with deployed CSS size. As much as I talk smack about "framework stupid" I've never seen anyone deploy the full 2.4mb lib. That would be truly asinine.

It's the bloated HTML size that delays the loading of sub-assets and HTTP parallelism that have the real negative impact. Remember that NO assets -- not even with push or preload -- start loading until the HTML is done. Thus the more HTML you have for nothing (like sharting classes onto everything), the slower the page load. Don't even get me started on how HTML is rarely cached due to how content can change, whilst external style can be. This means faster loads if the user revisits the page, and the ability to pre-cache the appearance of items shared across pages.

As I'm always saying if people would stop wasting 100k of markup on 16k's job, 500k of CSS on 48k or less' job, and megabytes of JS on websites that might not even warrant JavaScript's presence? Well, maybe they wouldn't be so easily suckered, hoodwinked, bamboozled, saddled up and taken for a ride by incompetent crap like "HTML/CSS frameworks" or the gibberish lunacy of throwing classes at things that have ZERO business having classes. Or Aria roles. Or data-attributes that aren't for attr() or scripting only...

Or any of the other ignorant BS that's hot and trendy these days.