Site Health: audit the CSS and reduce specificity

[afercia]

Splitting this out from https://core.trac.wordpress.org/ticket/46573#comment:59

The Site Health CSS uses unnecessary overqualified selectors. For example:

body .health-check-accordion .health-check-accordion-trigger .badge.blue

Seems to me there's no reason to use a so high specificity: this stylesheet is enqueued only in the Site Health pages.

According to the WordPress CSS coding standards, specificity should be kept to the lower possible value. Reading ​https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#selectors two base principles should be applied:

• use specificity with responsibility
• refrain from using over-qualified selectors, div.container can simply be stated as .container

I'd recommend to review all the CSS part as new code merged in WordPress should meet the standards not only for mere compliance but also to illustrate best practices and for educational purposes.

Also, high specificity is one of the historical problems across the core stylesheets. New code should really reverse the trend and keep specificity to the lower possible value.

[afercia]

Note: in #46621 I've started reducing specificity in the parts related to that specific issue.

[afercia]

46685.diff​

• simplifies selectors and reduces specificity
• .site-health is a broad selector as it's applied on the body: shouldn't be used to target generic elements as they could live also in the admin menu, top bar, etc.
• removes the wrap class: seems unnecessary and allows to simplify the headings rulesets
• currently, the tables don't have thead elements: removed the related ruleset
• renames css classes so some elements can be targeted directly
• removes unnecessary properties e.g. display: block on div and nav elements

Note:

• couldn't find a .spinner used in these pages: removed but please double check

@clorith when you have a chance, your testing/revision is welcome!

[afercia]

46685.2.diff​ refreshes the patch after recent line number changes.
Also, border-radius: 0.3em 0.3em 0 0; on the first accordion can be removed, as it has no effect.

[afercia]

In 45071:

Coding Standards: Clean up the Site Health stylesheet.

• reduces selectors specificity to avoid over-qualified selectors
• removes unused rulesets / properties
• renames some CSS classes

Fixes #46685.

[afercia]

In 45074:

Coding Standards: Improve the Site Health CSS for small screens.

Amends #45071.
See #46685.