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

[Anton Khorev]

> 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.

Search for class name. If they weren't removed in a pull request, they are likely 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.

You can easily find them with a `.loader` search. `loader`/`loader_copy` classes still exist because there are about five different methods currently in use to place spinners. I want to replace them with one method (https://github.com/openstreetmap/openstreetmap-website/pull/3779#issuecomment-1317291481).

> I think that we should follow the convention to prefix all the classes used in our Javascript with `js-`.

Initially I wanted to say that since you don't like custom css, the only non-bootstrap classes should be the ones used in javascript. Then why don't you propose to prefix those temporary css-only classes instead? But then you wrote https://github.com/openstreetmap/openstreetmap-website/pull/3779#issuecomment-1318600407 so, I guess, javascript-used classes are also bad? Or are they only bad when added/removed?

> Github has a nice explanation in their eslint rule... "JavaScript should only query and handle events for js- prefixed class names."

Are they also against custom css?

So instead of this:

    <button type="button" class="btn-close" ...>

write this:

    <button type="button" class="btn-close js-btn-close" ...>

?

Do you want to prefix ids too? How something like this should look like

    $("#sidebar .search_form input[name=query]")

?

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

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