Make WordPress Core

Opened 2 years ago

Last modified 27 hours ago

#55281 new enhancement

Twenty Twenty-One: Consider decreasing the selector specificity

Reported by: orkunaybek's profile orkunaybek Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-screenshots close
Focuses: css Cc:

Description (last modified by sabernhardt)

There is a CSS selector that selects almost any a tags and applies white background on focus. This forces users to use at least 4 classes on elements to override by specificity and complicate the code. You can see mentioned selector and how it overrides the focus color of a button with 3 classes already in attached screenshots. Why such strong selector is used there, is it really necessary, can we remove it or decrease the specificity?

Attachments (2)

selector.png (266.1 KB) - added by orkunaybek 2 years ago.
effect.png (645.0 KB) - added by orkunaybek 2 years ago.

Download all attachments as: .zip

Change History (4)

@orkunaybek
2 years ago

@orkunaybek
2 years ago

#1 @sabernhardt
2 years ago

  • Description modified (diff)
  • Summary changed from Twenty Twenty One Theme: Consider decreasing the selector specificity to Twenty Twenty-One: Consider decreasing the selector specificity
  • Version changed from 5.9.1 to 5.6

Hi and welcome to Trac!

It's technically a set of selectors in 04-elements/links.scss, and each starts with:

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button)

#2 @karmatosed
27 hours ago

  • Keywords close added; needs-patch removed

I am going to recommend this is closed. Firstly, whilst time should not be the only reason we close something, it has been there for a while, and to change specificity now might impact in ways causing issues.

If a solution that is desirable and doesn't do this can be found, I am happy to consider it, though. Thanks, everyone.

Note: See TracTickets for help on using tickets.