WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#14770 closed task (blessed) (fixed)

Clean Up Admin CSS Files

Reported by: JohnONolan Owned by: JohnONolan
Milestone: 3.1 Priority: normal
Severity: normal Version: 3.0
Component: Administration Keywords: has-patch needs-testing ui-feedback
Focuses: Cc:

Description

The current admin CSS files have become old and extremely bloated, the .dev files contain no comments or structure and stuff has pretty much just been thrown onto the end for a while now.

This ticket is to clean up all admin CSS files to make them much easier to maintain, reduce bloat, consolodate extraneous files, and provide better support for admin color schemes.

Also a possibility of looking at some dynamically generated rules for pulling in styles.

Attachments (2)

14770.diff (93.8 KB) - added by JohnONolan 3 years ago.
First pass, this patch should basically do nothing - it's a restructure only.
14770.2.diff (6.3 KB) - added by JohnONolan 3 years ago.
2nd pass - remove comment from file (as discussed with nacin) - cleanup conflicts.

Download all attachments as: .zip

Change History (20)

comment:1 follow-up: aaroncampbell4 years ago

  • Cc aaroncampbell added

I'd like to add "change all the id-based styles to class-based styles". It looks like there are currently over 2500 #'s in the wp-admin/css/*.dev.css files. The problem is that this makes it a LOT more work to correctly emulate existing styles in the admin.

For example, try to re-create something like the custom fields post meta box, and you either have to reuse IDs like postcustom and postcustomstuff (which isn't valid, and causes a lot of JS issues), or you have to copy/paste and duplicate a ton of CSS. Using classes would fix all this.

comment:2 in reply to: ↑ 1 filosofo4 years ago

Replying to aaroncampbell:

I'd like to add "change all the id-based styles to class-based styles".

+1. This is one of the many admin markup issues that has me frequently wanting admin templating.

comment:3 JohnONolan4 years ago

This is good stuff guys, keep it coming!

comment:4 TECannon4 years ago

Should probably keep this #12825 in mind during some of the cleanup.

comment:5 TECannon4 years ago

Related: #13375 (Make admin styles more re-usable)

comment:6 aaroncampbell4 years ago

I forgot I opened #13375. It's now a duplicate of this ticket (since this one is blessed). I'm closing it, and it's mostly summed up in my first comment here.

comment:7 demetris4 years ago

  • Cc dkikizas@… added

comment:8 TECannon4 years ago

  • Cc TECannon added

comment:9 gazouteast4 years ago

  • Cc gazouteast added

comment:10 jane3 years ago

  • Keywords needs-patch added; ui-feedback removed

Can we get an initial patch posted in whatever its current state is so people can start checking it over? Code freeze is coming up, would hate to miss deadline for this.

JohnONolan3 years ago

First pass, this patch should basically do nothing - it's a restructure only.

comment:11 JohnONolan3 years ago

  • Keywords has-patch needs-testing ui-feedback added; needs-patch removed

comment:12 westi3 years ago

The patch has a few merge conflicts which I am going to try and resolve by hand.

comment:13 westi3 years ago

(In [16136]) First pass of wp-admin.css cleanup from JohnONolan.
Merge conflicts manually resolved and marked for review
Not recompressed for now to allow for easier side by side testing.
So test with SCRIPT_DEBUG set to true.
See #14770 props JohnONolan

comment:14 nacin3 years ago

Looks great.

I'd like to shift some of the comments into a CSS style guide as part of the core contributor handbook. Some are notes for the committers, and I don't want some random user to think that they *should* add good classes to that file. It's a core file, it should never be edited.

comment:15 JohnONolan3 years ago

Excellent point Nacin - My original intention for the comment at the top of the file was to encourage core devs to take a little extra time on the CSS, not just dump it at the end... if you know what I mean. You're absolutely right though - we don't want users thinking that comment is for them.

Do you think the sentiment of the comment will be sufficient in the handbook alone? or is there a different approach inside the file which could achieve the intended result more clearly?

comment:16 filosofo3 years ago

How about just re-wording the comments so it's clear that they're meant for core dev? Also making them appear only in the *dev.css files will help.

That will greatly improve their chances of actually being read and not becoming stagnant.

JohnONolan3 years ago

2nd pass - remove comment from file (as discussed with nacin) - cleanup conflicts.

comment:17 JohnONolan3 years ago

This is now finished for 3.1 - suggest generating compressed version now so that it'll get tested by as many people as possible. Ticket can now be closed, reopened if any bugs pop up, followup work to be moved to a new ticket for 3.2.

Bazinga.

comment:18 nacin3 years ago

  • Resolution set to fixed
  • Status changed from new to closed

(In [16415]) Finalize conflicts from [16136]. Final pass on wp-admin css cleanup. props JohnONolan, fixes #14770.

Note: See TracTickets for help on using tickets.