Merge admin CSS files and remove duplicates

Looking through wp-admin/css we have large amount of stylesheets that aren't optimized neither for loading nor for maintenance/consistency.

Generally we have two options: either to break our CSS into smaller chunks of dependent styles and load different amount on each screen or to "globalize" it all into wp-admin.css and wp-admin-rtl.css.

The second option would be (quite?) better for faster loading. Currently we concatenate and compress the admin css but since the files are different for most screens, the concatenated file has to be downloaded each time. If all admin styles are in one file it will be cached by the browser after the first time (in memory) and all subsequent loads will be faster.

Apart from slowing down the browser loading, having many smaller CSS files has several drawbacks: much harder to reuse styles, harder to track duplicates, harder to maintain proper "cascading", etc. I think we can eliminate about 1/5 to 1/4 of the total CSS LOC if we do proper removal of duplicate styles.

How so? There's reusing and then there's clumping together unrelated elements.

CSS doesn't care whether elements are related or not. If we repeat

border-width: 1px;
border-style: solid;

in 20-30 places, that's duplication.

harder to track duplicates

Maybe, but not if we split the files by components: general layout, list tables, form elements etc.

So if a style is defined in list-tables.css and you're adding something on the Add New post screen that can use it, what do you do? Do you add the selector to list-tables.css and "break the flow" or do you define (copy) the style to add-new-post.css?

harder to maintain proper "cascading"

Huh? Please give an example.

See above. If we start mixing what CSS applies on which screen, it can get messier.

Generally the question is: is it easier to maintain one large css file or 20 small files (that will always be outputted together)? IMHO one large file is easier.

I would like to get started on this. Could we agree to at least merge the *-rtl.css files into the main .css files (with using the .rtl body class)?

This would make it easier to edit RTL styles because you could include the RTL style directly after the non-RTL style (grouping them together). I can provide a patch tomorrow if we would like to start with that.

There are still quite a few duplicates or nearly duplicates in wp-admin.css. All are welcome to help slim it down. The only thing we need to be careful about is to apply any uncommited patches to it before starting to hunt for duplicates. It's hard to merge conflicting css patches as each conflict has to be tested separately.

18314.hide-menu-ordering.diff will hide the menu item ordering arrows when JS is enabled. I was wondering why this style is restricted to body.nav-menus-php when others are not, e.g. .js .input-with-default-title.

Also [18577] dropped the CSS reset entirely. It was previously in global.css which is no more. One problem this has caused can be seen on the nav menus page: expanded menu items have a gap between the header and the drop down holding the settings. In Chrome this is caused by the 1em margin on dl elements.

CSS reset is necessary/good to have when supporting older browsers (IE6, FF2, etc.) as they have wildly different default styling. All newer browsers have very similar styling, so instead of resetting everything to some kind of zero values we only need to define global styles for the elements we need.

There are still quite a few duplicates or nearly duplicates in wp-admin.css. All are welcome to help slim it down. The only thing we need to be careful about is to apply any uncommited patches to it before starting to hunt for duplicates. It's hard to merge conflicting css patches as each conflict has to be tested separately.

Is there an easy way to see which patches have been committed besides actually reading each diff and looking to see if the changes are already there?
~Peace

18314.wphead-favorites-misc.diff gets rid of a lot of #wphead rules since the new admin bar was put in (leaves in stuff for Press This), #favorite-actions and the old editor buttons (new rules in editor-buttons.css).

attachment:18314.press-this.diff​ adds an ID to the press-this sidebar so it can use the styles for the regular post screen and then only changes the dimensions so it still fits within the window. Also gets rid of some other styles that are already defined for the main post screen.