Use convention for selecting elements

[skulptur]

Selecting by className is bad practice as that ties the styling with the selection, and changes affect more files/places than they should.

Proposal is to use something like data-ref="next-button" and that the built in selectors only get the string "next-button" rather than the whole selector.

Users can still use element.querySelector if they need to bypass the rule, but it will be more apparent.

[ThaNarie]

The downside of this is tight coupling between the HTML and the JS - which we want to avoid as much as possible.

Example;
If i want to add some interactivity to an existing element, I normally only have to update the JS.
Now I also have to add a data-ref to the HTML, which cause the BE templates to be updated as well.