Determine methodology recommendations for CSS audit

[notlaura]

This ticket is under the umbrella CSS audit ticket #49582. Ticket #49637 is intended to collect a wish list of *what we want to know* as a result of the audit. This ticket is for determining some recommended approaches and tools for finding that information.

For example:

• Using PostCSS to find and compare selectors
• Creating a specific set of Stylelint rules to flag areas with high specificity
• A recommended approach for any manual inspection of files

[isabel_brison]

I had a play with stylelint: installed it in a local branch, and added a very basic config to test the rules that seemed useful for audit purposes. Here are my takeaways:

• no-descending-specificity doesn't help much because it compares different selectors, e.g. Expected selector ".about__container p" to come before selector ".about__section .column p:last-of-type", which doesn't tell us a lot because we have huge files with sections related to different components of a page, so specificity levels naturally go up and down.

• no-duplicate-selectors returned quite a few results. This is worth looking into to check whether duplicates are accidental or if they are leveraging the cascade to override previous rules.

• selector-max-specificity is the most useful of the lot. I ran it with a limit of "1,3,2" (that's one id, three classes and two element selectors) and got a scary big amount of results. Here is where we probably want to go file by file and break down how much of that selector bloat we can get rid of. Ideally, we should be aiming for something like "0,2,0", but if that's too much to ask for, then let's see how low we can bring it without having to rewrite everything 😅

Also, for a neat visual overview of specificity in files, this tool is quite nice: ​https://isellsoap.github.io/specificity-visualizer/

Regarding dead code removal, we can try running something like ​https://github.com/purifycss/purifycss, to get some idea of where to look at least.

For removal of old IE-specific code, I think there's no option but going through everything manually 😟

What I'm thinking is, if we're going to come up with actionable recommendations, we'll have to do quite a bit of manual testing, changing stuff and checking what breaks. The visual regression testing would be a good helper for that, so perhaps we should set it up sooner rather than later.

Also, I have a question: should we take plugins into account at all at this stage? If we're not changing any of the actual styling in wp-admin, is it even possible for there to be side-effects for plugins?

[notlaura]

Had a quick win using a stylesheet analysis tool called Parker: ​https://github.com/katiefenn/parker.

Here are the stats running it on wp-admin/css.

Total Stylesheets: 26
Total Stylesheet Size: 496851
Total Rules: 4353
Total Selectors: 6261
Total Identifiers: 17062
Total Declarations: 10111
Selectors Per Rule: 1.4383184011026877
Identifiers Per Selector: 2.7572272799872226
Specificity Per Selector: 54.01708992173774
Top Selector Specificity: 401
Top Selector Specificity Selector: #side-sortables #postcustom #postcustomstuff #the-list textarea
Total Id Selectors: 2178
Total Unique Colors: 133
Unique Colors: #F7F7F7,#CCCCCC,#555555,#FAFAFA,#999999,#23282D,#A0A5AA,#5B9DD9,#DDDDDD,#72777C,#FFEBE8,#CC0000,#000000,#FFF8E5,#FFB900,#F6A306,#FBEAEA,#DC3232,#666666,#F1F1F1,#FFFFFF,#444444,#0073AA,#00A0D2,#124964,#32373C,#016087,#F9F9F9,#5A5A5A,#46B450,#007CBA,#CCD0D4,#555D66,#FBFBFB,#E2E4E7,#ADC5D2,#191E23,#6C7781,#40860A,#F8F9F9,#BFE7F3,#826EB4,#EEEEEE,#F3F3F5,#E8E8E8,#9FD0D5,#298CBA,#FFFFE0,#D54E21,#FFE9E9,#FFAAAA,#E9FFE9,#AAFFAA,#82878C,#B4B9BE,#00B9EB,#CA4A1F,#AAAAAA,#F4EFE1,#D7D2C5,#413E38,#FEFCF7,#716D64,#BD3854,#5F1B29,#321017,#F5F5F5,#F6C9CC,#F1ACB1,#FF6666,#606A73,#FEF7F1,#AC1B1B,#E29808,#EDC048,#CD5A5A,#F6E2AC,#DF3232,#AA0000,#727773,#FCFCFC,#83B4D8,#DD3D36,#1E8CBE,#C4C4C4,#F3F3F3,#0074A2,#EDEFF0,#FBFBFC,#E5E5E5,#FDFDFD,#E3E3E3,#7E8993,#F1ADAD,#E35B5B,#FBC5A9,#F78B53,#FFE399,#FFC733,#C1E1B9,#83C373,#888888,#F7FCFE,#D64D21,#F56E28,#79BA49,#006505,#D98500,#E4F2FD,#727272,#E1E1E1,#C62D2D,#31843F,#FF8573,#FAAFAA,#FECAC2,#BB2A2A,#D5D2CA,#656A6F,#EAEAEA,#0071A1,#F3F5F6,#CCF3FA,#9999DD,#ECF7ED,#E5F5FA,#FFBA00,#66C6E4,#F6FBFD,#222222,#33B3DB,#D5D5D5,#929793
Total Important Keywords: 110
Total Media Queries: 69
Media Queries: screen and (max-width: 782px),only screen and (max-width: 799px),print,(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi),screen and (max-height: 550px),all and (min-width: 784px),only screen and (max-width: 1004px),screen and (max-height: 700px) and (min-width: 981px),only screen and (max-width: 960px),screen and (max-width: 600px),screen and (max-width: 480px),only screen and (max-width: 500px),only screen and (max-width: 480px),only screen and (min-width: 769px) and (max-width: 1000px),only screen and (max-width: 768px),only screen and (min-width: 800px) and (max-width: 1499px),only screen and (min-width: 1500px) and (max-width: 1800px),screen and (max-width: 870px),screen and (min-width: 355px),screen and (max-width: 640px),screen and (max-width: 660px),only screen and (max-width: 1120px),only screen and (max-width: 782px),only screen and (max-width: 600px),only screen and (max-width: 640px),screen and (max-height: 400px),screen and (max-width: 320px),only screen and (min-width: 1250px),only screen and (max-width: 850px),only screen and (max-height: 480px),screen and (max-width: 450px),only screen and (max-width: 320px),screen and (min-width: 1600px) and ( max-width: 2299px ),screen and (min-width: 2300px),screen and (max-width: 1100px) and (min-width: 782px),(max-width: 480px),only screen and (min-width: 2000px),only screen and (min-width: 1680px),only screen and (min-width: 1640px),only screen and (max-width: 780px),only screen and (max-width: 650px),screen and (min-width: 1667px),screen and (min-width: 3333px),screen and (max-width: 1024px),aural,only screen and (max-width: 1000px),screen and (max-width: 771px),screen and (max-width: 830px),only screen and (max-width: 599px),only screen and (min-width: 600px),only screen and (min-width: 600px) and (max-width: 699px),only screen and (min-width: 700px) and (max-width: 1199px),only screen and (min-width: 1200px) and (max-width: 1399px),only screen and (min-width: 1400px) and (max-width: 1599px),only screen and (min-width: 1600px),screen and (min-width: 1670px),screen and (min-width: 2101px),screen and (min-width: 1601px) and (max-width: 2100px),screen and (min-width: 1201px) and (max-width: 1600px),screen and (min-width: 851px) and (max-width: 1200px),screen and (max-width: 850px),screen and (max-height: 540px),screen and (max-width: 1018px),screen and (max-width: 900px),screen and (max-width: 792px),(max-width: 850px),(max-height: 472px),screen and (max-width: 1200px)

A couple of these are listed in ticket #49637 as items in the report outline!

[ryelle]

I was poking around this over the weekend, and ended up building my own auditing tool 😁 It uses csstree to parse the CSS and returns more detail than Parker's reporting. My script's ​latest output can be found here, and the ​audit script itself is here.

Some of my numbers are different than Parker's:

• I'm reporting more colors because Parker only counts hex codes, so rgb(…), rgba(…) aren't counted.
• My tool reports fewer IDs because it's calculating the number of selectors with IDs, not number of IDs total — an unfortunate number of selectors use multiple IDs 😱
• I created a few other reports that aren't in Parker (like how many distinct values does a given property have, how many times is display:none used)

I'm happy to keep working on this, if there's interest — i think writing our own audits will let us get very specific about the info needed & how to report on it.

[isabel_brison]

Adding a note here, as discussed in the CSS meeting: ​https://make.wordpress.org/core/2020/05/20/chat-summary-14th-may-2020/, to include both the contents of wp-admin/ and wp-includes/ in any automated or manual checks, as there is some cross-contamination of styles between the two.

Also, noting that there are several instances of <style> tags with CSS inside .php files. There are also dynamically added <style> elements, as well as inline styles, in .js files (including one instance of inline !important in /js/_enqueues/wp/svg-painter.js). This means we have to make sure to run any CSS-related checks in .php and .js files too.