Weak CSS selectors for WP Editor styles

[ericlewis]

If a theme or plugin has an ID definition selector for table rows (#page table tr td), it overrides WP Editor's CSS selector ( .wp_themeSkin tr.mceFirst .mceToolbar tr td ), making the editor toolbar inherit the theme's styles for table data, which can look unsightly.

[SergeyBiryukov]

Could not reproduce with #page table tr td.

Reproduced with #wpwrap table tr td. It's not just the editor, the table in Custom Fields meta box is also affected.

Shouldn't the theme or plugin in question use a more specific selector though (and only add the CSS on its own page, not on every admin screen)? .wp_themeSkin tr.mceFirst .mceToolbar tr td seems specific enough as is.

[ericlewis]

Sorry I didn't specify, #page table tr td was testing with Twenty Thirteen.

The issue here seems to be CSS specificity, and the nature of CSS class usage in the selectors for the WP Editor skin versus a theme or a plugin using an ID selector to define the style. The W3 spec has a ​nice rundown on calculating specificity, and it's been covered in ​CSS Tricks and ​Smashing Magazine for further reading.

It's tricky here, because the nature of the WP Editor is that it can be called multiple times per page, meaning if we were going to style it with IDs we would have to drop styles in an internal stylesheet, like the styling of the WP admin bar or the Twenty-somethings' custom headers. Or perhaps use !important rule for the wp_themeSkin declarations.

[ericlewis]

Also, #page table tr td is not a selector in Twenty Thirteen, that was just an example using a Twenty Thirteen selector.

However, dropping a WP Editor in Twenty Thirteen does look funky out-of-the-box on button hovers, because of the style reset borrowed from Normalize.css:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

[SergeyBiryukov]

Related: #21863 (box-sizing fix for the Toolbar).

[azaozz]

Replying to ericlewis:

It's tricky here, because the nature of the WP Editor is that it can be called multiple times per page, meaning if we were going to style it with IDs we would have to drop styles in an internal stylesheet, like the styling of the WP admin bar or the Twenty-somethings' custom headers. Or perhaps use !important rule for the wp_themeSkin declarations.

Yeah, and both options (a body stylesheet generated from PHP or !important) don't sound that good.

Agree with Sergey that .wp_themeSkin tr.mceFirst .mceToolbar tr td is quite specific. We could probably add .mceEditor in front of every .wp_themeSkin in ​editor.css (about half of the selectors there) but it will always be possible to overwrite that with a selector containing IDs. Better option imho is to avoid using IDs when defining default element styles, or if not possible, at least to make them more specific: #page > table tr td, etc.

Other suggestions welcome :)

[markjaquith]

I'm inclined to say that the theme/plugin should be using a more targeted selector, to keep its rules from affecting other things.

[azaozz]

No traction for 8 months. Feel free to reopen if there's a better suggestion on how to fix.