CSS class vs. data attribute?

[Daniel Shiffman]

Question for @runemadsen about https://github.com/magicbookproject/magicbook.

In the first edition of NOC, the ASCIIDOC would resolve to CSS classes, i.e.

<div class="note" id="pseudo-random-numbers-o1bcX">
<h1>Pseudo-Random Numbers</h1>
</div>

The version I have now written in HTMLBook looks like:

<div data-type="note" id="pseudo-random-numbers-o1bcX">
<h1>Pseudo-Random Numbers</h1>
</div>

My old CSS is:

.note {
  font-size: 10pt;
}

But I think it should now be:

[data-type="note"] {
  font-size: 10pt;
}

I ask b/c this question applies across the board to just about everything. Is one of these preferable? Should adjust my CSS to use data attributes? Or adjust my HTML to go back to classes?

[Rune Skjoldborg Madsen]

Hi Dan

Both would be totally fine, but given that the HTMLBook spec defines a <div data-type="note"> admonition, I think that's the better choice. http://oreillymedia.github.io/HTMLBook/#h-x_admonitions

So yes, you would change your notes to to use data-type and use that CSS, possibly like this:

div[data-type="note"] {
  font-size: 10pt;
}

[Daniel Shiffman]

@alterebro Do you want to do me to do a global find/replace to change all the class="note" to data-type="note" or do you want to handle this as part of your CSS work?

[Jorge Moreno]

I couldn't find any occurrence of the .note class on the HTML, so I have removed references to them on the main CSS file and switched to the data type attribute.

[Daniel Shiffman]

Oops, yes, I must have done this fine/replace already. Thanks!