Too difficult for programmers to write a CSS layout??

At my intern job, I keep hearing how backend programmers need Bootstrap framework because they "are not frontend-minded," and they need a standard library to collaborate.

I don't get it. Those programmers are smart enough to learn to program and build a backend infrastructure for an advanced web application. Yet, they can't be bothered to use even CSS Flexbox and CSS Grid to write a simple page? And Bootstrap is their answer to this "problem?" How? By writing crummy HTML with full of utility classes that you need to learn on top of CSS itself?

@deathshadow would say it is yet another "3 I's." I still have a hard time, though, understanding how someone smart enough to do programming can have trouble using CSS AND, somehow, they conclude that Bootstrap requires less work than writing some simple Flexbox code.

 

The argument would be, people with math, logic, computing, coding skills are not always the most creative ones. Their left side of the brain works great, yet they can barely draw a stick man. They can learn css / HTML, but it doesn't mean they can learn (or fully understand) how to create visually appealing websites.

 

This and that most good programmers use libraries to get work done instead of rewriting code. They most likely don't see the point of spending time styling layouts and components when there is a library that already exists. To a degree they have a point. Why spend time thinking about styling a box when you can just type a 1 liner and boom there's your box.

 

Which would make sense if they weren't writing as much if not more code WITH the library as they do without it. That's the disconnect Gary-SC noticed, and once you are aware of it these "frameworks" instantly look like incompetent trash made by people not qualified to write a single blasted line of HTML, much less tell others how to do so.

Hence why you end up with idiocy like this slopped all into the markup:

 <div class="card-deck mb-3 text-center">
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Pro</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>20 users included</li>
          <li>10 GB of storage</li>
          <li>Priority email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>

Code (markup):

Flipping the bird at accessibility and semantics with the gibberish multiple H1 without SECTION, classes on everything, button indicating scritpt-tardery where none should be used, improper / illogical document structure, etc, etc... doing the job of this markup:

	<div class="prices">
		<div>
			<h3>Free</h3>
			<ul>
				<li class="price"><strong>$0</strong> / mo</li>
				<li>10 users included</li>
				<li>2 GB of storage</li>
				<li>Email support</li>
				<li>Help center access</li>
			</ul>
			<a href="#">Sign up for free</a>
		 </div><div>
			<h3>Pro</h3>
			<ul>
				<li class="price"><strong>$15</strong> / mo</li>
				<li>20 users included</li>
				<li>10 GB of storage</li>
				<li>Priority email support</li>
				<li>Help center access</li>
			</ul>
			<a href="#" class="priority">Get started</a>
		</div><div>
			<h3>Enterprise</h3>
			<ul>
				<li class="price"><strong>$29</strong> / mo</li>
				<li>30 users included</li>
				<li>15 GB of storage</li>
				<li>Phone and email support</li>
				<li>Help center access</li>
			</ul>
			<a href="#" class="priority">Contact us</a>
		</div>
	<!-- .prices --></div>

Code (markup):

...and this CSS:

.prices > div > a:focus {
	box-shadow:0 0 0 0.2rem rgba(38,143,255,0.5);
}

.prices {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.prices > div {
	flex:1 0 auto;
	width:26%;
	min-width:14em;
	margin:0 0.5em 1em;
	padding-bottom:1em;
	text-align:center;
	border:1px solid rgba(0,0,0,0.125);
	border-radius:0.25em;
	box-shadow:0 0.125em 0.25em rgba(0,0,0,0.075);
}

.prices h3 {
	padding:0.5em;
	margin-bottom:1em;
	font-size:1.5em;
	font-weight:normal;
	background:rgba(0,0,0,0.03);
	border-bottom:1px solid rgba(0,0,0,0.125);
	border-radius:0.166em 0.166em 0 0;
}

.prices ul {
	list-style:none;
	padding-bottom:1em;
}

.prices .price {
	font-size:2.5em;
	margin-bottom:0.5em;
}

.prices > div > a {
	display:block;
	padding:0.5em 1em;
	margin:0 1em 0 0.5em;
	text-decoration:none;
	font-size:1.25em;
	color:#07F;
	border:1px solid #07F;
	border-radius:0.25em;
	transition:color 0.3s, background 0.3s, box-shadow 0.3s;
}

.prices > div > a.priority {
	background:#07F;
	color:#FFF;
}

.prices > div > a:focus,
.prices > div > a:hover {
	color:#FFF;
	background:#06D;
	border-color:#06C;
}

Code (markup):

... and if I'm going to have to slice up markup into the back-end template, I know which one I'd prefer to work with... and it sure as shine-ola isn't the one that's twice the markup, pissing on caching models, and running the risk of getting sued or prosecuted for ADA/EQA/DDA violations.

... and what "Savings" does the mental derpitude of bootcrap give you in that little section? 150 bytes? Of course, that's just a snippet, i you know what' you're doing over an entire page thanks to the sheer volume of like properties, you can actually end up using 10 to 50% less code not even counting the size of the framework against the total.

See this recreation

https://cutcodedown.com/for_others/cutTheCrap/pricing/rewrite.html

of bootcrap's pricing example.

Not even five minutes work for anyone QUALIFIED to have ANY blasted business writing HTML or CSS... and in total -- omitting the reset -- 5.89k of code to the original's -- omitting the framework -- 6.43k. This is actually BS's "best case" scenario, where overall the best it has done is teach you to slop presentation into the markup instead of keeping it where it huffing belongs, coming close to breaking even.

Worst case it pisses on caching models, accessibility, usability, functionality, sustainability, the amount of work the back-end developer has to do, back-end load and execution times, etc, etc, etc.

Which is cute if it's some personal blog for grandma, and utter complete sleazy dirtbag incompetence if it's for business... and those making EXCUSES for it likely having zero damned business doing the job.

Like all the "developers" I've had to tell bosses to fire every time someone contacts me to come in as an accessibility consultant, or the sleazier dirtbags who fight tooth and nail to keep such sleazy crap in their sites even as they're being fined thousands of dollars a day for non-compliance.

Like that client I had a little over a year ago now where we got it all fixed, got them out of court, and three days later their doubletalk marketing turd and know-nothing IT director undid everything I did for them, then wondered why the case was re-opened.

But sure, that doesn't really happen to websites, of course not.

ANYONE using these derpy frameworks -- bootstrap, tailwind, w3.css -- have ZERO business calling themselves a professional, building sites for business, or even building websites in general. JUST like the incompetent fools who know jack about *** who created said frameworks.

It's called work, not happy happy fun-time. You take the sleazy "shortcut" that's not a shortcut at all, it shouldn't be a surprise when things go bits-up face-down or it takes ten times longer to develop than it should.

I do think that if there were a framework where the people who MADE IT weren't utterly ignorant of the most basic of HTML and CSS practices I'd have far less problems with them, or if they made you write less code overall, or if they didn't make you deploy ten times the code needed, or didn't prevent people from learning that these systems are NOT a single damned bit easier.

But no, instead we have a industry of suck-ups and sycophants who maintain echo-chambers of like minded head-bobbers and blow-jobbers like cut-rate cultists, stamping out any dissension with bans, handing nubes to predators on a silver platter, and spewing endless lame excuses, unfounded glittering generalities, and toxic positivity to maintain that oh so precious status quo of "well who gives a shit".

THEN companies wonder why their sites are failing, or cost so much to host, take months of tinkering to do one days work, or land them in court. Hurr-durrz.