Lint the About page CSS for 7.1

[afercia]

In #29792 / ​https://github.com/WordPress/wordpress-develop/pull/12934 I'm experimenting a Stylelint configuration to lint the Core admin CSS.

I took the liberty to run it on the about.css file of the About page for WordPress 7.1. The linting reported several issues (50 errors). It would be good to fix at least a part of them.

More importantly:

In [63182] see #65698, two new order CSS properties have been added for the About page. They are used for the reponsive view media query at 600 pixels. Have they been carefully checked to see if they introduce any accessibility problems? Cc @joedolson

Most of the other errors are about:

• Indentation.
• Unnecessary spacing inside parentheses.
• Unnecessary quotes.
• Line-height value with unit.
• Duplicate selectors.
• Not shortened color values.
• Missing leading zero for decimal values.

PR incoming shortly.

Trac ticket: https://core.trac.wordpress.org/ticket/65856#ticket

The CSS for the WordPress 7.1 About page contains several ​CSS Coding Standards errors.

This PR aims to fix _most_ of them.

Importtant for accessibility:

At the moment, the about.css file contains ​two new order CSS properties. They are used for the responsive view at 600 pixels. They should be carefully checked to see if they introduce any accessibility problems.

A list of the errors is available in the attached txt file:

​01 about-page-css-errors.txt

What this PR does _not_ fix:

• It does not fix most of the 'Unexpected duplicate selector'. The duplicate selectors come from the structure of the file that is divided into sections. Still, they are unnecessary duplicate.
• 'Unexpected qualifying type selector' e.g. h3.is-larger-heading where the element type selector should not be used. So far, I'm considering this a 'warning' and not a real error although this is explicitly mentioned in the CSS Coding Standards:

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

## Use of AI Tools

None

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

Not able to see this type of selector change in PR. Did i missed anything?

Sorry, the commit 07788a5aff3289008c41d39c76163ff8d078ab61 was incorrect. I have fixed it in a5c848a27a50dc6a52ec0d413334d4ea6fe4aa60.

I'd like to commit this as there are only two hours left until the 7.1 RC commit freeze today.

[wildworks]

In 63212:

Coding Standards: Lint the About page CSS.

Linting the About page styles with Stylelint reported a number of CSS coding standards violations, and this changeset addresses most of them.

Discussed in: ​https://github.com/WordPress/wordpress-develop/pull/13014

Follow-up to [63182].

Props afercia, mukesh27, wildworks.
See #65856.

[wildworks]

This is a backport request of [63212] to the 7.1 branch.

Commited: https://core.trac.wordpress.org/changeset/63212

[joedolson]

@afercia I added the order properties myself; they move two decorative images in containers that hold no other content.

[afercia]

Replying to joedolson:

@afercia I added the order properties myself; they move two decorative images in containers that hold no other content.

Thanks for confirming they do not impact a11y.

[joedolson]

Approved for backport to the 7.1 branch.

[wildworks]

In 63233:

Coding Standards: Lint the About page CSS.

Linting the About page styles with Stylelint reported a number of CSS coding standards violations, and this changeset addresses most of them.

Discussed in: ​https://github.com/WordPress/wordpress-develop/pull/13014

Follow-up to [63182].

Reviewed by joedolson.
Merges [63212] to the 7.1 branch.

Props afercia, mukesh27, wildworks.
See #65856.

Refrain from using over-qualified selectors, div.container can simply be stated as .container.

Not able to see this type of selector change in PR. Did i missed anything?

Yes, you missed what I mentioned in the section "What this PR does not fix".

For history, these are the errors and warnings left in the about.css file after the linting, based on the experimental Stylelint configuration in the works on ​https://github.com/WordPress/wordpress-develop/pull/12934
In a future, all of these should be either fixed or get a stylelint-disable{-line}{-next-line} comment with a required disable reason added to the comment.

src/wp-admin/css/about.css
    81:1   ✖  Unexpected duplicate selector ".about__container", first used at line 22                                   no-duplicate-selectors
   146:1   ✖  Unexpected duplicate selector ".about__section", first used at line 111                                    no-duplicate-selectors
   242:1   ✖  Unexpected duplicate selector ".about__section .is-section-header", first used at line 186                 no-duplicate-selectors
   335:3   ✖  Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use   property-disallowed-list
              the order property when it does not affect reading order, meaning, and interaction.
   339:3   ✖  Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use   property-disallowed-list
              the order property when it does not affect reading order, meaning, and interaction.
   395:1   ✖  Unexpected duplicate selector ".about__container", first used at line 22                                   no-duplicate-selectors
   406:19  ⚠  Unexpected qualifying type selector "h3.is-larger-heading"                                                 selector-no-qualifying-type
   415:19  ⚠  Unexpected qualifying type selector "h1.is-smaller-heading"                                                selector-no-qualifying-type
   416:19  ⚠  Unexpected qualifying type selector "h2.is-smaller-heading"                                                selector-no-qualifying-type
   425:19  ⚠  Unexpected qualifying type selector "h3.is-smaller-heading"                                                selector-no-qualifying-type
   450:19  ⚠  Unexpected qualifying type selector "p.is-subheading"                                                      selector-no-qualifying-type
   480:17  ⚠  Unexpected qualifying type selector "a.button.button-hero"                                                 selector-no-qualifying-type
   540:19  ⚠  Unexpected qualifying type selector "hr.is-small"                                                          selector-no-qualifying-type
   545:19  ⚠  Unexpected qualifying type selector "hr.is-large"                                                          selector-no-qualifying-type
   549:19  ⚠  Unexpected qualifying type selector "hr.is-invisible"                                                      selector-no-qualifying-type
   553:19  ⚠  Unexpected qualifying type selector "div.updated"                                                          selector-no-qualifying-type
   554:19  ⚠  Unexpected qualifying type selector "div.error"                                                            selector-no-qualifying-type
   563:1   ✖  Unexpected duplicate selector ".about__section", first used at line 111                                    no-duplicate-selectors
   568:1   ✖  Unexpected duplicate selector ".about__section.is-feature", first used at line 200                         no-duplicate-selectors
   584:20  ⚠  Unexpected qualifying type selector "h3.is-larger-heading"                                                 selector-no-qualifying-type
   810:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   926:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   936:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   948:1   ✖  Expected no more than 1 empty line                                                                         @stylistic/max-empty-lines
   968:13  ⚠  Unexpected qualifying type selector "div.updated"                                                          selector-no-qualifying-type
   969:13  ⚠  Unexpected qualifying type selector "div.error"                                                            selector-no-qualifying-type
  1288:13  ⚠  Unexpected qualifying type selector "h2.wp-people-group"                                                   selector-no-qualifying-type
  1347:43  ⚠  Unexpected qualifying type selector "p.wp-credits-list"                                                    selector-no-qualifying-type
  1351:13  ⚠  Unexpected qualifying type selector "p.wp-credits-list"                                                    selector-no-qualifying-type

✖ 29 problems (12 errors, 17 warnings)
  4 errors potentially fixable with the "--fix" option.