Show Markup in CSS Comments

Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file. For example, a sidebar.css file might look like:

/*
<aside>
   <div class="widget">
       <h5 class="widget-title">
       <p></p>
   </div>
   <!-- other widgets -->
</aside>
*/

aside { background-color: #ccc; }
aside .widget { background-color: white; padding: 10px; }
aside .widget h5 { border-bottom: 1px solid black; }
                    /* etc. */

This could be useful for yourself as you would have to do less flipping back and forth between where you are viewing markup and this CSS file. This is even more useful when:

1. The markup is generated by JavaScript and harder to see anywhere else or,
2. The CSS is specific to a plugin or third-party add-on