Atom snippet for HTML comments - code-snippets

Question

I was looking through the atom documentation at writing snippets:
Using atom snippets
However, the documentation is too simple for the problem I'm facing. I want to write a snippet that will automatically create a comment that will contain a class name of the HTML element. Let's see an example:
<div class="first-class another-class">
...
</div><!-- first-class another-class -->
I want to have a snippet that will automatically create the comment containing "first-class another-class" when I type, for instance, "comm" after the closing tag of the div and hit TAB. Is this even possible with snippets?

Answer 1

Doesn't your workflow allow you to create the comment together with the preceding tag? In that case, you could use something like this:
'.text.html':
'Snippet Name':
'prefix': 'comm'
'body': """
<div class="${1:classes}">
${2:<!-- your markup here -->}
</div><!-- ${1:classes} -->
"""
Or more advanced:
'.text.html':
'div+comment':
'prefix': 'comm'
'body': """
<${1:div} ${2:class="${3:classes}"}>
${4:<!-- your markup here -->}
</${1:div}>${2:<!-- ${3:classes} -->}
"""
Save this file as (e.g. comm.cson) and put it in the packages directory.