Make WordPress Core

Opened 5 years ago

Last modified 3 years ago

#49582 new enhancement

wp-admin CSS audit

Reported by: isabel_brison's profile isabel_brison Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords:
Focuses: css, performance Cc:

Description (last modified by netweb)

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.

Change History (54)

#1 @SergeyBiryukov
5 years ago

  • Description modified (diff)

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


5 years ago

#3 @netweb
5 years ago

  • Description modified (diff)

This ticket was mentioned in Slack in #design by notlaura. View the logs.


5 years ago

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


4 years ago

#6 @notlaura
4 years ago

A status update on the CSS Audit:

Work so far has been tracked in these two tickets:

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

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


4 years ago

#8 @isabel_brison
4 years ago

@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.

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

#14 @notlaura
4 years ago

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!

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


4 years ago

#16 @notlaura
4 years ago

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.

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

#37 @notlaura
4 years ago

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.

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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


4 years ago

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

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


3 years ago

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

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

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


3 years ago

#53 @notlaura
3 years ago

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

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.