Quick Tip: Use HTML Comments to Indicate Pseudo-elements

At the recent W3Conf Nicolas Gallagher explained that although pseudo-elements have helped us add decorative content to our pages while keeping our HTML clean, this has led to some maintainability issues.

Developer tools can help to some degree, but oftentimes dynamically added content like pseudo-elements or extra elements added via JavaScript are initially harder to track down.

As Nicolas pointed out, the far-future improvement in this area is the Web Components spec, but I think this is something we can improve on right now.

Let’s say we have the following CSS, using pseudo-elements:

.exampleModule {
  float: left;
  border: solid 2px #ccc;
  position: relative;
}

.exampleModule:before {
  content: url(icon.png);
  float: left;
}

.exampleModule:after {
  content: url(corner.png);
  position: absolute;
  bottom: 0;
  right: 0;
}

The CSS is just illustrative, and really doesn’t matter for this example; it could be anything that uses one or more pseudo-elements. The main takeaway here is what you would see in the HTML:

<div class="exampleModule">
<!-- pseudo: icon.png -->
<p>content...</p>
<!-- pseudo: corner.png -->
</div>

Now you don’t have to view the CSS or inspect the element with your dev tools; as soon as you look at the HTML, you know that the decorative content (in this case the two images) is added via pseudo-elements.

The same principle can be applied to content that is injected via JavaScript, and I suppose you could also include HTML comments in modules to list the different states that the module could be in, as represented by classes in the CSS. But that’s a little more complicated, and could probably be a topic for another post.

Related posts:

1. Default CSS Display Values for Different HTML Elements


2. CSS3 Structural Pseudo-class Expressions Explained


3. Dealing with Empty Elements in CSS3 Animations

via Impressive Webs http://www.impressivewebs.com/html-comments-indicate-pseudo-elements/