Make WordPress Core

Opened 7 years ago

Last modified 3 years ago

#40686 new enhancement

CSS: introduce naming and usage conventions for JS targeting

Reported by: afercia's profile afercia 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 :)

Change History (6)

This ticket was mentioned in Slack in #core by lukecarbis. View the logs.


3 years ago

#2 @ryelle
3 years ago

  • Focuses css added

This ticket was mentioned in Slack in #core-css by notlaura. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-css by notlaura. View the logs.


3 years ago

#5 @notlaura
3 years ago

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.

This ticket was mentioned in Slack in #core-css by notlaura. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.