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 :).