Element Closing Comments

Using id populated comments adjacent a close tag

I’ve used this convention for decades now, before the advent of verbose coding clients that help keep the peripheries of indentions inline, along with vertical column markers and toggled code blocks.

So why am I still using the convention?

<div id="div1">
   {content}
</div><!-- /#div1 -->

Ancient habits hardly die? Well, I’ve transitioned from <CODING HTML LIKE THIS> to the advent of inline and block elements, CSS1-3, etc.

No, I like keeping things simple and to use only what I need—took me a long time to use a “;” after values in the last properties of a selector, but I do it now as that seems to be standard.

Plus I had a VP of Development in a 2001 incubator give me a hard time about her not finding a glitch in a large codebase wherein my code was appended without the subsequent egineer first placing a “;” in my last argument (or was it a variable?). She wasn’t mad, just extremely tired. And I’d rather that not have to happen again.

So I haven’t dropped what I call element closing comments because I still find them useful. Yes, I’ll click a div closed and open to find its top and bottom if I need to. Or I’ll scroll down a columner line to find just exactly where my <main> element ends in the code.

Or, I’ll do a quick Find for the ID attribute value and get to the bottom of my chosen element in a flash.

And that’s what’s making working with confusers, er, computers, so much fun in the end of the first 1/5 of the 21st century: lots of options to call upon when moving around code with lightning speed.

Yes, even multiple options that do the same thing because at any given particular second I don’t feel like letting my fingers leave the keyboard for the trackpad or the mouse; or the opposite.

The thing that makes it work so well (i.e., fast) is the discipline I’ve had for years now for adding the closing comment whenever I create an element. There were some years when I was working on deep applications where as part of any template for any piece of code snippet I preformatted, the ID attribute was always included, just in case…

Now I only add id attributes if needed instead of leaving something akin to a hanging chad of the 2000 presidential election fame sitting there empty and alone in the code.

<section id="" style="display: block;">

Critical to the success of this practice is careful naming conventions. If I’m at the bottom of some long-toothed div and see

</div><!-- /#justAnotherDiv.DontMindMe -->

That’s not going to help me as I scan the page for information about the code blocks I am tending. If, however, I see this like

</div><!-- #/formWrapper -->
</div><!-- #/togglePuppyMillImage -->
</div><!-- #/weatherWidget -->
</div><!-- #/gardeningTipsSidebar -->

I could in a very quick instance know exactly where I was in the code. Always seems easy when in a flash of inspiration we are hurry through code to get it “down on paper” to name critical elements frivolously, but spending a few extra seconds to get the name findable again, will help when then quickly adding the closing element tag and adjacent id populated comment.

Author: Brooks Rogers

Programming for a long time now. Working with Stencil these days and creating custom HTML elements/web components.

Leave a Reply

Your email address will not be published. Required fields are marked *