IDs and CSS classes have more than one purpose.

[meodai]

While touching lots of parts of the DOM i broke quite a few things.

Ex. the class highlightBox has some style on it but on the same time is used in the e2e tests. Changing the class caused test to fail. The situation is similar with some ID's (they are used to style but also to bind some behaviour to it). When changing anything that I thought would only be design related I would break things I did not expect to break.

My proposal would be to separate CSS / JS and testing selector logic. A possible implementation could be:

• Only use .some-css-class to style things.
• Use data-attributes to select things in js: data-somefancyfunction => document.querySelector('[data-somefancyfunction]') (Sometimes people like to use a class prefixed with js- rather than a data attribute, I like the data attribute because it can carry a value easily)
• Only use data-e2etest="nameofthetest" to select things within the tests. /* and maybe remove those for production */

I think it would make it easier to do changes with no side-effects. It would be clear, what does what and by that made it easier to contribute to the code in the future.

What do you think?
Any thought on the separation of concerns itself and on my proposed implementation?

[peterpeterparker]

In NNS-dapp we use [data-tid="something"] attributes for test (jest and e2e) purpose. I'm not a fan of bloating the DOM with unmeaningful attributes but, these turned out to be really convenient.

[meodai]

cool I think we should do something similar. I keep running into issues because of that.