Jens Oliver Meiert

On the Deterioration of HTML/CSS Practices

Post from January 22, 2015 (↻ December 12, 2016), filed under .

This and many other posts are also available as a pretty, well-behaved e-book: 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; }
WTF.

Figure: Not available for comment.

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 used to acknowledge inexperience, is giving exclusively harmful advice (no matter what commenter Louis suggests, who misses the point of CSS entirely).

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 the Author

Jens Oliver Meiert, photo of July 27, 2015.

Jens Oliver Meiert is a developer (O’Reilly, W3C, ex-Google) and philosopher. He experiments with art and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Amazon. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

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?

Read More

Have a look at the most popular posts, possibly including:

Or maybe say hi on Twitter, Google+, or LinkedIn?

Looking for a way to comment? Comments have been disabled, unfortunately.

Flattr? Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2015 → On the Deterioration of HTML/CSS Practices

Last update: December 12, 2016.

“If there is any secret, it is missed by seeking.”