Clean Up Admin CSS Files

[JohnONolan]

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.

[aaroncampbell]

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.

[filosofo]

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.

[JohnONolan]

This is good stuff guys, keep it coming!

[TECannon]

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

[TECannon]

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

[aaroncampbell]

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.

[jane]

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.

[JohnONolan]

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

[westi]

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

[westi]

(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

[nacin]

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.

[JohnONolan]

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?

[filosofo]

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.

[JohnONolan]

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

[JohnONolan]

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.

[nacin]

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