HTML Code Styles: What Are Your Strategies?

I've written a follow up post to this article that you can read here.

Personally, I’m a big fan of implementing coding standards and/or style guides for each of our various languages. Ultimately, I think that it helps to make a team’s code more readable and maintainable.

On one hand, some developers are better at adopting said standards than others, whereas other developers enjoying helping to write the documentation, books, and pull requests to make sure code is up to the given standard.

Although I’m personally a big fan of coding standards, there’s always room for small improvements in each language that help optimize a developer’s work flow.

As such, I thought I’d share two things that I do as part of my HTML code styles that help make code more readable and improve the workflow in my IDE.

HTML Code Styles

HTML Code Styles

To be clear, the whole point of this post is to share what I do in hopes that it may benefit some of you guys, but I’m also looking for you guys to share what you do so that I can shamelessly borrow the skill to improve my own workflow.

As time goes on, I’d love to expand on this particular topic for various languages, but we’ll see how we do for HTML code styles, first.

1. Comment Terminating Tags

Whenever you’re working with a static HTML file, it’s relatively easy to see the entire document and to format it in such a way that you can easily scan where each element starts, and how it relates to its siblings, parents, and so on.

But if you’re working in a language that supports any kind of templates (that is, you can spread a single document across multiple files), then it immediately becomes more difficult to trace code.

As such, I always add terminating comments to my HTML elements so that I know what they’re, you know, terminating whenever I’m working on a given template.

For example:

<article id="post-0" class="post no-results not-found">
	<header class="entry-header">
		<h1 class="entry-title"><?php _e( 'Page or resource not found', 'standard' ); ?></h1>
	</header><!-- .entry-header -->
	<div class="entry-content">
		<p><?php _e( 'No results were found.', 'standard' ); ?></p>
		<?php get_search_form(); ?>
	</div><!-- .entry-content -->
</article><!-- #post-0 -->

The rules are simple:

  • If the element has an ID, then the terminating comment ends with <!-- /#element-ID -->>
  • If the element has a class name (or multiple class names), then the comment is of the form <!-- /.element-first-class-name -->
  • If the element has no ID nor class name, then I terminate it with the element type: <!-- /div -->

2. Underscore Class Names

The second thing that I’m trying to implement on a more consistent basis is to use underscores rather than dashes to space out multiple words in ID’s and classnames.

This is because that when you opt to select the text, most IDE’s will only select the word leading up to the hyphen whereas if you use an underscore, then it will highlight the entire word.

It may sound trivial, but for whatever reason this has become one of the more frustrating aspects of writing markup.

I’m in the groove working across several files and am writing styles and JavaScript to handle certain things, then I go to copy the element’s ID or classname and the flow gets interrupted because of a hyphen.

Lame.

This is one of those things that’s definitely easier to implement in newer projects rather than go and retrofit all of my previous projects, so I’m not terribly concerned with doing that, but as I begin new work its a practice that I’m beginning to put in place.

Your HTML Code Styles

Okay, so there are my two things. As opinionated as developers are, I know that you guys have something to share, so please do so in the comments.

After all, I’m looking to borrow them :).

10 Replies to “HTML Code Styles: What Are Your Strategies?”

  1. I hear you big time on the annoyance of not being able to select the full class/ID on dash-separated class/ID names… but for whatever reason the dash separated names visually appeal to me for CSS. I think I’m just used to it. Not that being used to something has ever been a good excuse for maintain practice. :P

  2. Thanks for sharing this Tom! I have adopted the same coding styling as you since most of my time is spent in Standard Theme. I can’t tell you enough how many times seeing the ending tag comment has helped me figure out where I’m at. Especially when you are using a responsive framework when you have divs all over the place. The underscore for class names has helped as well. When I double click, I want the whole thing highlighted :)

  3. I hadn’t adopted that detailed bits of comments at the end of each block, but I agree with the simplicity of it. Yes, you’re supposed to use tabs/etc, but what do you do when you’ve got several blocks and aren’t sure which one you’re looking at the end of?

    As for the underscores/hyphens, it’s never been an issue for me that it doesn’t mark the entire word – not sure why, maybe it’s just not a part of my workflow for me to copy? Not sure -, so I go with the more visually attractive one.

    Lately I’ve started getting into the habit of prefixing hooks that are less used for CSS and more used for JS with js-something-, where the something has varied. Last it was ui, since it was pure ui-sugar.

  4. I have also adopted your closing HTML tag comments. I find it super helpful in keeping my place within the HTML stack.

    But as much as I love you, I just cannot get on board with the underscore in the CSS names. I get what you are saying, but it goes against the industry best practice. As inconvenient as that may be in IDE’s, best practices always win out for me.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.