Page MenuHomePhabricator

Cleanup styles loaded without JavaScript that are not needed
Closed, DeclinedPublic

Description

I did a CSS audit on http://en.m.wikipedia.beta.wmflabs.org/wiki/Unused_styles_test_page?mobileaction=stable (a fairly big page) with JavaScript disabled:

122 rules (46%) of CSS not used by the current page.
Many of these can be removed/added more intelligently.

Rules that need to be reviewed to see if they are relevant/can be moved elsewhee*
.references-column-count
.quotebox
caption
button
.header > .header-title
.content h1 .edit-page
.content h3 .edit-page
.content .open-block .edit-page
.content .section-heading,.content .in-block
.content .section-heading .mw-headline,.content .in-block .mw-headline
.content .section-heading > span,.content .in-block > span
.truncated-text.multi-line
.truncated-text.two-line
.heading-holder .tagline
.heading-holder .tagline:first-letter
#toc,.client-js .no-js-only,.printfooter,.jsonly

Can be deleted given they will never appear in page
#filetoc,.mw-editsection
textarea

Rules to move to gallery module
.gallery .gallerybox
.gallery .gallerybox div

Rules to standardise:
#mw-mf-page-center .mw-mf-banner

Rules to move to JavaScript:
.stable .last-modified-bar.pre-content
.last-modified-bar.active
.last-modified-bar.active #mw-mf-last-modified
.last-modified-bar.active a
.overlay #secondary-button.user-button.loading span,.header #secondary-button.user-button.loading span,.overlay .user-button.loading span,.header .user-button.loading span
#page-actions li input
#page-actions li button
.cloaked-element
.position-fixed
.no-position-fixed .drawer
.no-position-fixed .position-fixed
.touch-events :focus
.drawer,.content-overlay
.content_block
.last-modified-bar.active
.last-modified-bar.active #mw-mf-last-modified

Unknown origin should be removed/added via JavaScript whereever they are being added

.mw-echo-alert
.mw-ui-icon-collections-icon:before
div.accountcreator-show,p.accountcreator-show
span.accountcreator-show,small.accountcreator-show
table.accountcreator-show
li.accountcreator-show

Should be added conditionally e.g. dependant on namespace
.mw-mf-image-replacement
.mw-mf-special #footer,.page-Main_Page #footer
.skin-minerva .portal-column-left-wide,.skin-minerva .portal-column-left,.skin-minerva .portal-column-right,.skin-minerva .portal-column-right-narrow

Event Timeline

Jdlrobson assigned this task to Jhernandez.
Jdlrobson raised the priority of this task from to Medium.
Jdlrobson updated the task description. (Show Details)
Jdlrobson set Security to None.

After working with React.js I don't think this is actionable without a big rearchitecture of our frontend code. I'm going to think about this some and raise another bug with suggestions.