Why Presentational Classes for HTML/CSS Are Ignorant Garbage

Image for post
Image for post

The majority of people are “visually oriented”. They like to think about how things look before most other concerns. When it comes to web development this is a hard “habit” to break oneself of, but it’s an essential one given that HTML is for more than just perfectly sighted users. It’s why bass-ackward nonsense like artists under the DELUSION they’re “designers” pushing pixels around in Photoshop are able to sucker nubes and rubes alike, flipping the bird at UX and accessibility in their ignorance of anything other than art. This same “appearance first” rubbish trickles down all over the entire development process, and nowhere is this more destructive and harmful than in the HTML itself.

As I said in my previous article “Semantic Markup Probably Doesn’t Mean What You Think!” HTML is for saying what things are — semantically, grammatically, or structurally — and not what they look like. This is so that all users and all devices can have access to the content in as useful a manner as possible.

We got away from that during the late ‘90’s browser wars when Microshaft and Nyetscape went to war trying to outdo each-other with bling-bling, and as developers who gave a flying purple fish about accessibility clamored to make their websites as glitzy as possible. Hence why broken non-semantic trash like “tables for layout” were used, dumbass tags like <font> and <center> were slopped into the language alongside equally stupid attributes like bgcolor, color, size, border, align, etc, etc. All of which destroyed the entire intent and purpose of HTML.

All of that was supposed to be fixed by CSS and “the real HTML 4”, allowing us to go back to writing proper semantics — and in fact forcing us back to it — by moving presentation out of the markup; whilst at the same time HTML 4 Strict —— deprecated all the goofy presentational tags and attributes.

Image for post
Image for post
You morons just hung vacancy signs on your asses… and my foot’s looking for a room!

Which is why it’s so bad people slopped the fake HTML 4 “transitional” onto their broken inaccessible presentational HTML 3.2, and to this day still use the presentational mindset with HTML 5’s lip-service doctype slopped atop it, patting themselves on the back over how “modern” they are.

We get a new standard that creates separation of concerns, returns us to easy accessibility, and makes HTML 3.2 look like crap… so what do the masses do? Ignore it and spend the next 22+ years slopping out the same garbage code they always have by throwing 4 tranny of 5 lip-service atop it. Even today most people are still vomiting up presentational code because “transitional” let them get away with it, and 5 is so ridiculously permissive. Well, simple truth rarely discussed?

The “transitional” part of “HTML 4 Transitional” literally means “in transition from 1997 to 1998 development practices”

And it’s why today with so many people recreating everything wrong with HTML 3.2 and 4 Transitional with classes is so utterly and mind-blowingly DUMBASS!

So What Are Presentational Classes?

It’s when you use classes in your markup for the sole purpose of EXPLICTLY saying a style. HTML/CSS frameworks across the board universally use this technique, which is part of what makes them those pesky 3i of web development: ignorance, incompetence, and ineptitude!

Basically we’re talking classes like “x-red”, “col-4-s”, “box-shadow”, and so forth. Any time you make a class that actually says what style is being applied, you’re doing it all wrong and undoing two decades or more of progress!

Why Is That So Bad?

First off in most cases you end up violating DRY. Don’t repeat yourself. You can see this in mental midgetry like Boostrap or Tailwind.

<!-- This is an example component -->
<div class="login_form border-2 border-indigo-500 p-10 pt-5 shadow-sm mx-auto flex rounded" style="width: 500px;">
<div class="sec flex-1">
<img class="mb-3 mx-auto" style="height: 150px;" src="https://www.fatcow.com/images/free-logos/World-Wide01.jpg" alt="">
<span class="flex shadow-md mb-5 text-xs">
<span class="bg-indigo-500 w-28 font-bold text-center text-gray-200 p-3 px-5 rounded-l">Email</span><input class="field text-sm text-gray-600 p-2 px-3 rounded-r w-full" type="text" placeholder="someonespecial@example.com">
</span>
<span class="flex shadow-md mb-5 text-xs">
<span class="bg-indigo-500 w-28 font-bold text-center text-gray-200 p-3 px-5 rounded-l">Password</span><input class="field text-sm text-gray-600 p-2 px-3 rounded-r w-full" type="password" placeholder="">
</span>
<a class="text-indigo-500 hover:underline font-bold text-xs ml-auto cursor-pointer">Forget Password ?</a>
<span class="border-2 border-indigo-500 hover:bg-indigo-500 hover:text-gray-100 mt-3 text-indigo-500 block text-center p-3 px-4 text-sm rounded cursor-pointer font-bold">Login</span>
</div>
</div>

Where on top of being proof the clowns who CREATED these frameworks aren’t qualified to write a single blasted line of HTML how many times are they repeating font-bold, text-center, text-gray-200, text-gray-600, etc, etc, etc? That is a giant train wreck laundry list of not just how NOT to write HTML, but also how not to leverage CSS. Such an ugly mess for what any sane/rational developer would/should have written as:

<form action="#" method="post" id="login">
<h2>Company Name</h2>
<fieldset>
<div>
<label for="login_email">E-Mail</label>
<input type="text" name="email" id="login_email" placeholder="someonespecial@example.com" required>
</div><div>
<label for="login_password">Password</label>
<input type="password" name="password" id="login_password" required>
</div>
</fieldset>
<div class="submitsAndHiddens">
<a href="#">Forgot Password?</a>
<button>Login</button>
</div>
</form>

Which brings us to the second reason presentational markup is so bad, it’s more code. So much more code — typically anywhere from two to ten times what’s needed — that even by the time you write the CSS specific to it, you’ve STILL written less code. Just now you don’t need the bloated halftweet ermagahd aherpaderp framework.

The third reason is there as well, caching. CSS stored separately in its own file is more likely to be cached than the HTML. A monolithic stylesheet can pre-cache appearance of like elements across pages or the appearance of commonly used subpages.

There’s a fourth and less apparent problem though.

Media Targets: Presentational Classes /FAIL/ Hard!

There are multiple reasons most of these framework CREATING re-re’s with their presentational classes don’t have media=”” on their stylesheet links. That being they don’t know enough HTML to write a single line of it, they fail to grasp the advantages of separation of concerns, and they have ZERO blasted clue what media targets even are.

As I’ve said many the time — — HTML is for saying what things are, not what they look like. One of the reasons this is important is that ideally you should be able to deliver multiple styles; colour choices, skins, layouts, etc, etc. The ideal is to create a markup you can use for most any possible layout with minimal modifications, so all you need to do to reskin is feed it a different stylesheet.

Why is that “so important” you ask? Because not only is it advantageous to give users options, it also means that for different devices — you can send them different styles as well. What are you going to do, have a class that says “background-grey” when you want it white for print so as to not waste people’s ink? That you want “four columns, box-shadow, font-red, text-center” means SO damned much to users on a braille reader. NOT!

That’s WHY <font>, <center>, bgcolor, color, size, and all the rest of that type of junk were removed from HTML with 4 Strict. As such the difference between W3Fools idiotic halfwit asshat w3.css

<div class="w3-center w3-red w3-text-white w3-border">

and

<center bgcolor="red" border="1"><font color="white">

Is absolutely nothing. You are using the same broken outdated dumbass mindset as the WORST of 1990’s browser-wars era code!

At which point, admit defeat, stop trying to use CSS, and go back to that HTML 3.2 tables-for-layout presentational markup you so clearly and dearly miss!

Conclusion

THIS STUFF DOES NOT BELONG IN YOUR MARKUP! And if you don’t see it that way or don’t see what’s wrong, then you probably shouldn’t be trying to write HTML or CSS.

Leverage your semantics, use classes that say what things are or why they MIGHT receive some sort of style, NOT what that style is. Don’t be afraid of combinators and don’t believe the BALD FACED LIES about how such techniques are “slower”.

To be brutally frank, there is a LOT of 100% grade A farm fresh manure being shoveled around to defend these broken, mindless, outdated and outmoded practices.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store