WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 5 days ago

#49582 new enhancement

wp-admin CSS audit

Reported by: 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 (22)

#1 @SergeyBiryukov
8 months ago

  • Description modified (diff)

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


8 months ago

#3 @netweb
7 months ago

  • Description modified (diff)

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


7 months ago

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


4 months ago

#6 @notlaura
4 months 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 months ago

#8 @isabel_brison
4 months 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.


3 months ago

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


3 months ago

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


3 months ago

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


3 months ago

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


2 months ago

#14 @notlaura
8 weeks 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.


8 weeks ago

#16 @notlaura
8 weeks 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.


6 weeks ago

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


5 weeks ago

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


4 weeks ago

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


3 weeks ago

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


12 days ago

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


5 days ago

Note: See TracTickets for help on using tickets.