Using data-Attributes for styling

[deleonio]

What is your motivation for using data attributes for styling with CSS?

Link: https://db-ui.github.io/mono/review/main/components/button/overview

<button class="db-button" data-variant="solid">Solid (Adaptive)</button>

vs

<button class="db-button variant-solid">Solid (Adaptive)</button>

[mfranzke]

What is your motivation for using data attributes for styling with CSS?

Link: https://db-ui.github.io/mono/review/main/components/button/overview

<button class="db-button" data-variant="solid">Solid (Adaptive)</button>

vs

<button class="db-button variant-solid">Solid (Adaptive)</button>

Good question. Mainly it's adapting the principles of regular html-attributes, and that for the difference in between somehow "meaningless" classes, whereas an attribute enables you to provide a "schema" and "exclusive" values.

I've even also read an article some time ago and will add it as well.

see also:

• https://twitter.com/devongovett/status/1576635415024390144?s=43&t=WldtpekRA8l-RGx8gBCvNg and https://www.keithcirkel.co.uk/css-classes-considered-harmful/
• We even also mention it within our previous repository documentation, that we would need to copy to this repo as well as soon as we proceed to a beta version: https://github.com/db-ui/core/blob/main/docs/adr/semantics.adoc#using-attributes-instead-of-classes