CSS: introduce naming and usage conventions for JS targeting

[afercia]

As part of the broader goal of the ​CSS roadmap, it would be great to start introducing CSS classes naming and usage conventions for JS targeting.

This need clearly emerged during the ongoing exploration to revamp the Settings API, and woud benefit all the codebase. Work on the Settings API is happening on GitHub and ​there's an open issue for this.

Quoting from the doc @helen prepared to share some thoughts (the doc is available on the GitHub issue):

Reusing styling class names is fragile and obscures intent when doing long-term maintenance.

Personally, I can only add that I can't count the number of times when touching some CSS class or ID forced me to check all the codebase to make sure they weren't used also for JavaScript related purposes :)

[notlaura]

We discussed this in the Core CSS chat on April 15, 2021 and generally agreed on the following approach:

1. Using the .js- namespace for classes that are used for JS targeting e.g. .js-toggle-panel
2. These classes should not have styling attached to them, instead styling that is applied with JS controlled class toggle should use stateful .is-* classes e.g. .is-toggle-panel-open
3. We need to determine a workflow for updating selectors in the JS and identify third party plugins that might rely on them for JS purposes

Regarding the third point, there is a ticket for determining a deprecation path for core CSS (see #53070), and that workflow might be relevant here, too.

Does anyone have feedback on the above points? We also discussed bringing this up in dev-chat for some more visibility if it is to be adopted as a standard.