On the Deterioration of HTML/CSS Practices

Published on January 22, 2015 (↻ February 5, 2024), filed under Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Lately, in the coding part of the Internet.

Innofied:

.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

CSS-Tricks:

.table { display: table }
.tr { display: table-row }
.thead { display: table-header-group }
.tbody { display: table-row-group }
.tfoot { display: table-footer-group }
.col { display: table-column }
.colgroup { display: table-column-group }
.td, .th { display: table-cell }
.caption { display: table-caption }

SitePoint:

.left { float: left; }
.right { float: right; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

Now, Swarnendu (Innofied), in his post, lists a good number of practices, other than those “helpful CSS classes,” that are smart. Chris (CSS-Tricks) does actually add a disclaimer labeling his code “redundant and messy.” Only Ahmad (Sitepoint), who I believe had previously acknowledged lack of experience, is giving rather harmful advice (no matter what commenter Louis suggests, who for a moment misses the point of CSS).

But the problem is that code like this is making the rounds again. As it’s worse than 90’s table code, we should be more careful writing about it. I can see how something undesirable slips into a mega post collecting 25 coding tips. I understand Chris when he’s sharing experiments. And I get why someone new to web development is mistakenly excited about making 1:1 connections from HTML to CSS. But I suggest experienced developers to be more clear about the dangers of such code (Chris inadvertently proved that old problem with research code), and the inexperienced ones to ask instead of tell. (Though in my early days I hadn’t done that, either.)

We know by now how to do better, writing code that is focused, functional, and maintainable. And we may be able to deem the samples above isolated regressions. But we better make sure they are just that, for otherwise they’ll mean more than deterioration of our best practices. (Doomsday smiley.)

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)

Comments (Closed)

1. On January 22, 2015, 16:54 CET, Santiago Escalante said:

   Perhaps the correct application of new technologies (like Sass or LESS) should avoid such redundancies.

2. On January 22, 2015, 17:19 CET, Fredrik Frodlund said:

   What really depresses me is how guys like that Louis from the Sitepoint article simply refuses to listen to reason and although several excellent points were made, he just blankly ignored them.

   It kind of makes me loose faith in humanity…

3. On January 26, 2015, 15:30 CET, Alistair Lattimore said:

   I’ve noticed this a lot as well and I wonder what the root cause of it is.

   If you rewind time a little, there was horrible HTML everywhere. Then the CSS movement happened, a lot of smart people collaborated and really pushed hard to separate presentation and markup at the same time making it clean to avoid the very mistakes you reference.

   This was a golden era in my opinion as that movement and community were excited by the prospect of getting output X with semantic markup and leveraging just CSS (later also JavaScript) to do something smart.

   Nowadays, it often feels as though the pass bar is bare minimum HTML/CSS quality. By that I don’t mean valid HTML/CSS, but broadly keeping the presentation within CSS but not really caring too much about the problematic CSS you mentioned.

   I thought a while ago this might have been driven by a culture of mostly disposable website front ends. For example, if you’re producing a WordPress template - the only thing that is going to live past a change of template is the post content - for which the HTML quality is governed by the quality of the editor for most authors (I appreciate you can edit it, but I would suggest many don’t).

   Then there are the scenarios where really pushing the bar of code quality matters, sites with thousands, tens of thousands or millions of pages of content. The prospect of producing below par HTML and being able to come back and ‘fix it later’ just doesn’t seem that practical, nor does having the front end of a website entirely disposable either. It should be noted also that most front end developers never have the opportunity to experience that environment and how important these sorts of aspects are either which may be a contribution factor.

   Has the CSS Zen Garden love affair of the 2000’s faded?