Oh for the love of Christmas, another "full Gungan" front end framework that pisses on the entire reason HTML is separate from CSS, what CSS is even for, and why HTML 4 Strict got rid of so many presentational tags and attributes, and reeks of a complete lack of understanding semantic markup and separation of presentation from content.

The moment you see classes like "br2" setting the border-radius, or "white" for text-colour, you are looking at the bleeding edge of browser wars markup that fails to understand that HTML is for saying what things ARE, NOT WHAT YOU WANT THEM TO LOOK LIKE!

This mental-huffing-midgetry:

class="bw0 br2 bg-dwyl-teal pa2 white fw1 tc ttu track”

Is NOT a step forward, it's 22 years worth of steps backwards, at which point you might as well go back to using HTML 3.2 with all those font/center tags and align/border attributes with “tables for layout” those of you who slop out HTML this way so clearly and dearly seem to miss. You have utterly failed to divine the purpose of HTML or CSS, much less how to use them properly.

Hence why if you don’t know what’s wrong with this:

<body class="w-100 sans-serif">
<header class="w-100 pa3 ph5-ns bg-white">
<div class="flex flex-wrap flex-nowrap-ns items-center mw9 center w-100">
<div class="flex items-center w-100 w-50-ns mb2 mb0-ns">
<a href="/" class="nowrap dib f5 f4-ns fw6 mt0 mb1 link black-90" title="Home">
Tachyons
<div class="dib">
<small class="nowrap f7 mt2 mt3-ns pr2 black-70">v4.12.0</small>
</div>
</a>
<div class='ml-auto dn inline-flex-l' style='height:20px'>
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="24px"></iframe>
</div>
<a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter nowrap bg-white-50 dim link flex-nowrap dn inline-flex-l items-center br2 ph2 pv1 lh-solid" style="background-color: #55acee;">
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="12" height="12" fill="#fff">
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
</svg>
<span class="white fw6" style="font-size: 12px;">Tweet</span>
</a>
</div>
<nav class="flex w-100 w-50-ns justify-start justify-end-ns">
<a title="Documentation" href="/docs/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Docs
</a>
<a title="Components" href="/components/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Components
</a>
<a title="Gallery of sites built with Tachyons" href="/gallery/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Gallery
</a>
<a title="Resources" href="/resources/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Resources
</a>
<a title="Tachyons on GitHub" href="https://github.com/tachyons-css/tachyons/" class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dn dib-l">
GitHub
</a>
</nav>
</div>
</header>

Please, do the world a favor and back away from the keyboard and take up something a bit less detail oriented like macramé. Endless pointless classes for nothing, endless pointless DIV for nothing, ZERO semantics making it a giant middle finger to usability and accessibility, invalid width and height attribute values, lack of proper URI escaping, static style in the markup, static image in the markup for a missed caching opportunity, fixed metric (px) fonts further pissing on accessibility, pointless redundant and nonsensical use of the title attribute… hardly a shock it’s a broken train wreck of 2.4k of markup doing less than 1k of HTML’s flipping job. That’s why the home page for said project is vomiting up 71k of markup for 21k of markup and a dozen content media — not even 32k of HTML’s flipping job. Goes well with the equally absurd 72k “framework” that the page tries to load six separate times (in at least three different versions) when the vast majority of websites need less than half of that for their entire site.

Just another monument to developer ignorance, incompetence, and ineptitude thanks to the bleeding edge of 1997 style markup 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