[openstreetmap/openstreetmap-website] Prefix html class names with js- when used by JavaScript? (Issue #3801)

[Andy Allan]

### Problem

When I'm refactoring, or when I'm reading pull requests, it's often unclear to me if particular html class names are still required. 

For example, in #3779 the CSS rules for `.loader` were removed, but the class was still left in the html code in the .erb templates in the PR. I had to dig around to find out that there is still JavaScript code that needs those classes to remain.

It's a particular problem because our JavaScript code is only lightly tested, so it's quite easy to break things by accidentally removing a class that's no longer required for CSS, without realising that it's also used by JavaScript.



### Description

I think that we should follow the convention to prefix all the classes used in our Javascript with `js-`. I've seen this done elsewhere, and recommended elsewhere too. Github has a nice explanation in their eslint rule that enforces this on their codebase:

https://github.com/github/eslint-plugin-github/blob/main/docs/rules/js-class-name.md

I'd like to hear any feedback from other developers who think this is either a good or bad idea, before I implement it. My intention would be to implement this across all of our JavaScript code, and then introduce an eslint rule like the one above to help enforce the convention.

### Screenshots

_No response_

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/3801
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/3801 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20221116/34ca28a9/attachment.htm>