Opened 8 years ago
Last modified 4 years ago
#40686 new enhancement
CSS: introduce naming and usage conventions for JS targeting
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | |
Focuses: | ui, css | Cc: |
Description
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 :)
We discussed this in the Core CSS chat on April 15, 2021 and generally agreed on the following approach:
.js-
namespace for classes that are used for JS targeting e.g..js-toggle-panel
.is-*
classes e.g..is-toggle-panel-open
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.