wp-admin CSS audit

[isabel_brison]

This is an umbrella ticket for an audit of the CSS in wp-admin, as discussed in the #core-css chat: ​https://make.wordpress.org/core/2020/03/03/css-chat-summary-27th-february/.

The audit should cover the following aspects, for which separate tickets may be created if they don't exist already:

• Identifying where specificity can be reduced;
• Identifying dead code;
• Identifying code specific to browsers no longer supported (existing ticket: #46015);

There is a ticket for auditing the toolbar CSS: #46003.

There is also a ticket for auditing all occurrences of !important: #26350, and another one tackling just the !importants in common.css: #47569.

[notlaura]

A status update on the CSS Audit:

Work so far has been tracked in these two tickets:

• Determine methodology recommendations: https://core.trac.wordpress.org/ticket/49638
• Create report outline: https://core.trac.wordpress.org/ticket/49637

The report outline exists in this Google doc: ​https://docs.google.com/document/d/1afy5gOZ6qZLs7ud2mzqHAo1ZI7stP5LRDMzm2IwJV04/edit?usp=sharing

And the methodology recommendation – apart from areas that require manual analysis – seems to be this great CSS audit repo by @ryelle: ​https://github.com/ryelle/css-audit/

The doc/report outline is currently storing our counts and other data so far, and the remaining work to do includes:

• Finish auditing CSS in non-CSS files (specifically in JS files where properties related to design e.g. color, spacing, typography are used)
• Add an audit to obtain counts for media queries
• Values and counts for font-family and letter-spacing
• History of core CSS coding standards and stylelint configuration

[isabel_brison]

@notlaura in addition to the above, I've added in a line for z-index values, as part of "unique values for layout properties" section. This was suggested by @joyously as there has recently been an issue with a huge value for z-index in the editor.

[notlaura]

Noting that the Google doc containing the audit data has been moved to: ​https://docs.google.com/document/d/1S21GAVYLO9unCG8a16tqlZleB9UeMqEqYeX1MLNduHA/edit

Also, it is nearing completion!

[notlaura]

We need re-run the the counts without any .css.orig and .rtl files – the Google Doc could be updated with the new counts, but it seems like we would benefit from having this data on Github so it is easier to share and we can keep track of history - any thoughts on having that data be part of ​the css-audit repo, at least for the time being?

I also posted this as ​an issue to the css-audit repo with some implementation notes in case that is a better place for this idea.

[notlaura]

An update on this ticket – we've made a ton of progress! The CSS audit for the most recent version of WP Admin ​can be viewed here.

What we've accomplished in the last few months:

• Wonderful styling and design of the audits UI to make it way more readable (@danfarrow)
• A Github workflow to pull the latest Core CSS from SVN and run the audits, opening a PR for the update (@ryelle)
• Reading the audit parameters from a configuration file (@notlaura)

Our next steps are to revisit the property-values audit and find a way to group the audits based on categories. The goal will be to provide insight on where we can have more consistency in styling such as typography and spacing.

[notlaura]

A Make post outlining the project:
​https://make.wordpress.org/core/2021/05/17/introducing-the-wordpress-css-audit-tool/

A note to the CSS coding standards documentation has been added, and the repo moved over to the WordPress org on Github!

See the final audit here, regenerated on each commit: ​https://wordpress.github.io/css-audit/public/wp-admin