There are few things as comically tragic as someone using the bleeding edge of 1997 presentational markup having the unmitigated GALL to talk about "DRY". What with the disastrously "WET" code bloat train wreck laundry list of how NOT to use HTML that is Bootcrap, Failwind, etc, etc.

But that's the problem with all of this type of nonsense, those jonesing for "no code" or "low code" solutions never learn enough to realize the damage -- in terms of UX, accessibility, efficiency, sustainability, maintainability, and so forth -- that these train wreck laundry lists of ineptitude create.

Hardly a shock so many of them rely on half-tweet nose-breathing garbage like front-end frameworks; systems that by their very nature are created by those so ill-versed in HTML and CSS they have no business telling people how to use either!

Like the header + hero section starting point with this broken inaccessible disaster:

<section>
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-8">
      <a class="text-gray-600 text-2xl leading-none" href="#">
        <img class="h-8" src="plain-assets/logos/plain-indigo.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button class="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
          <svg class="h-4 w-4" fill="currentColor " viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
        <li><a class="text-sm hover:text-indigo-700 font-medium" href="#">About</a></li>
        <li><a class="text-sm hover:text-indigo-700 font-medium" href="#">Company</a></li>
        <li><a class="text-sm hover:text-indigo-700 font-medium" href="#">Services</a></li>
        <li><a class="text-sm hover:text-indigo-700 font-medium" href="#">Testimonials</a></li>
      </ul>
      <a class="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200" href="#">Contact Us</a>
    </nav>
    <div class="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
      <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
        <h2 class="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">Take care of your performance every day.</h2>
        <p class="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
        <div><a class="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200" href="#">Track your performance</a><a class="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200" href="#">Learn more</a></div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <img class="object-cover w-full rounded-xl" src="plain-assets/images/indigo-600-square.png" alt="">
      </div>
      <button class="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
        <svg class="mx-auto text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-12">
        <a class="mr-auto text-2xl font-semibold leading-none" href="#">
          <img class="h-8" src="plain-assets/logos/plain-indigo.svg" alt="" width="auto">
        </a>
        <button class="navbar-close">
          <svg class="h-6 w-6 cursor-pointer hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200" href="#">Contact Us</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-gray-500">
          <span>© 2022 All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>

Endless pointless DIV for nothing, endless pointless presentational classes — not “utility”, PRESENTATIONAL! — recreating everything that was wrong with HTML 3.2, anchor + IMG doing H1’s job, SECTION and/or NAV doing HEADER’s job, static SVG in the markup, hooks for JavaScript via BUTTON on things that should NOT be scripted… It’s hardly a shock that just this simple piece of layout any competent developer should be able to make in a couple minutes ends up a fat bloated middle finger to accessibility… around 5k doing less than 1k of markup’s flipping job!

But sure, keep telling us how DRY it is.

Between the massive code bloat of two to ten times the markup needed to do the job, reek of ignorance of the most basic of accessibility minimums, and lack of anything remotely resembling proper semantics, it is painfully apparent the people who CREATE this type of inanity have ZERO business telling anyone how to build a website.

Nube predator sucker-bait, deluding people into THINKING they can build websites, when all they’re doing is saddling themselves or their clients up and taking them for a ride.