CSS naming conventions for JS targeting

[afercia]

Splitting this out from https://github.com/wpaccessibility/settings-api-enhanced/issues/6

See also discussion on Slack during Settings API meeting: https://wordpress.slack.com/archives/C02RQBWTW/p1493049728130607

The main goal should be establishing a solid convention for naming CSS classes or ID attributes meant to be exclusively used for JS targeting. Quoting from Helen's doc"

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

[afercia]

One good example of this is what Twitter does. They use CSS classes, regardless if they're used to target unique elements or multiple elements.

Some random examples:

js-global-actions
js-search-form
js-shortcut
js-signout-button
js-initial-focus
js-actionMomentMakerAddTweetToOtherMoment
js-toggleState
js-actionButton
wtf-module js-wtf-module
js-close
js-focus-on-open
js-last-tabstop
js-selectable
ProfileTweet-actionButton u-textUserColorHover dropdown-toggle js-dropdown-toggle
IconContainer js-tooltip
js-first-tabstop
share-via-dm js-actionShareViaDM
copy-link-to-tweet js-actionCopyLinkToTweet
embed-link js-actionEmbedTweet

Notice how they separate CSS classes meant for styling from the ones meant for JS, for example: dropdown-toggle js-dropdown-toggle

[felixarntz]

js- prefixed classes is certainly the right way for multiple elements in my opinion, and I'm also slowly changing my mind that even more distinct cases using a JS-specific class instead of the ID makes sense. :)

What should the structure of the class names be like? Can we specify patterns like js-{element} (for general functionality, such as making every element with that class a datepicker for example) and js-{context}-{action} (for more specify things)? Those are only very basic examples, I'm generally wondering whether we can even come up with such a flexible pattern set or whether we need to decide that per use-case.