Consolidate customizer CSS

[helen]

There is a lot of rule duplication in the customizer's CSS, as well as separate files for nav menus and widgets. Much of the UI is very similar or the same, so it seems worth coming up with some standard names for those visual components. We should also consider whether it's worth maintaining those separate files.

This will almost certainly impact JS and possibly plugins, so we should research that as well.

Previously: #34333

[mrahmadawais]

Makes sense!

@helen It will be a fun ticket to adopt. I will start reading the source and will let everyone here know about how I think we can consolidate the CSS and build generic structure based classes.

P.S. Also would love to know what @westonruter @celloexpressions @voldemortensen and @valendesigns have to say about this.

Looking forward!

[celloexpressions]

Thanks for volunteering to take this on @mrahmadawais!

I think the first step is to research duplication of styles and duplication of selectors, and to evaluate the potential areas where things could be consolidated. We're probably best off adding any new common classes as opposed to removing any, to avoid JS issues and minimize back-compat concerns. Any changes will have compatibility implications due to the ability to extend the core UI with custom panels, sections, and controls. In general, we should move away from the accordion- classes as those are from UI that is no longer used.

I believe that customize-nav-menus.css was largely duplicated from customize-widgets.css and intended to all be merged into customize-controls.css when the menu customizer plugin merged, but that didn't happen with all of the other work that was ongoing at that time.

There are also numerous pending patches that would be impacted by these changes. Depending on how much we want to clean up, it may be best to work on an actual patch during 4.7 RC and commit early for 4.8.

Also, previously and related: #30618, #36733, #30713.

[mrahmadawais]

Replying to celloexpressions:

Thanks for volunteering to take this on @mrahmadawais!
I think the first step is to research duplication of styles and duplication of selectors, and to evaluate the potential areas where things could be consolidated. We're probably best off adding any new common classes as opposed to removing any, to avoid JS issues and minimize back-compat concerns.

Makes sense.

Any changes will have compatibility implications due to the ability to extend the core UI with custom panels, sections, and controls. In general, we should move away from the accordion- classes as those are from UI that is no longer used.

Let me look into it.

I believe that customize-nav-menus.css was largely duplicated from customize-widgets.css and intended to all be merged into customize-controls.css when the menu customizer plugin merged, but that didn't happen with all of the other work that was ongoing at that time.
There are also numerous pending patches that would be impacted by these changes. Depending on how much we want to clean up, it may be best to work on an actual patch during 4.7 RC and commit early for 4.8.
Also, previously and related: #30618, #36733, #30713.

I think early 4.8 would make a lot more sense. But I will slowly start looking into it.

[johnbillion]

I think it's safe to say that this missed the boat.