On the Deterioration of HTML/CSS Practices

Published on Jan 22, 2015 (updated Feb 5, 2024), filed under development (feed). (Share this on Mastodon or Bluesky?)

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 web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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. (I value you being critical, interpreting charitably, and giving feedback.)