Firstly, mw-body usage is discouraged as it's not consistent across all skins - mw-body-content is better as it's provided by core.

Secondly, reference previews (or reference tooltips) should not be relying on these styles as they are intended only for skins. They shouldn't be relying on styles from Vector 2022 as we don't support or test for use cases outside the content of an article and they are not covered by the stable policy. For page previews, for example blockquote element is not permitted in a preview (https://www.mediawiki.org/wiki/Page_Previews/API_Specification#Markup_allowed_in_an_intro). I would suggest Reference tooltips provides its own styles for this element or scrub it from the preview.
It's worth noting mw-body class will be updated as part of T322573.

In terms of MediaWiki:Common.css I am not sure why you want to apply styles to both scenarios given the render environment is very different but if you must, you should just use blockquote or two selectors and possibly some !importants and be wary of these guidelines which don't require providers to communicate any changes - for this reason you'll likely want your styles to be defensive e.g. !important and overriding defaults where necessary.

As it stands, I'm not 100% sure what's being asked here so could you please be more specific about what you are trying to achieve? e.g. when I do this THEN this doesn't work format? Thanks in advance and sorry I can't be more helpful at this stage!

@Jdlrobson Thanks for the reply.

Firstly, mw-body usage is discouraged as it's not consistent across all skins - mw-body-content is better as it's provided by core.

The reason I mentioned .mw-body is that the Vector skin uses it for styling the content. This is part of the problem I'm trying to point out. If Vector used .mw-body-content, there would probably be no problem at all (but it can't, because, aside from #mw-content-text, there are also indicators and stuff in .mw-body?). The very fact that these are classes, not IDs, we're talking about hints that they should be able to be reused. Maybe .mw-body itself should be able to be reused, so all this display: grid should be applied to it only when it resides on <main id="content">?

Secondly, reference previews (or reference tooltips) should not be relying on these styles as they are intended only for skins. They shouldn't be relying on styles from Vector 2022 as we don't support or test for use cases outside the content of an article and they are not covered by the stable policy.

we don't support or test for use cases outside the content of an article

Are you sure about that? Take 2017 wikitext editor.

1. Enable it at https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsection-editing-editor ("Use the wikitext mode inside the visual editor, instead of a different wikitext editor").
2. Go to https://en.wikipedia.org/w/index.php?title=User%3AJWBTH%2Ftest&oldid=1221501802&action=edit.
3. Make a dummy edit.
4. Click "Publish changes...".
5. Click "Show preview" at the bottom.

The look in the popup is exactly like on the page. Why? Because VisualEditor is using .mw-body for the content of the popup, applying a hack to reset the unwanted styles:

So, if there is a skin which does more modifications to .mw-body that are not resetted with this, things will break. And my question is – if I do the same in a gadget/user script, how OK would that be, because if I do, we risk having all reference popups / other kinds of popups screwed up at certain point in time?

And by the way. Legacy Vector used .vector-body for a lot of stuff that Vector uses .mw-body for. But whereas .vector-body is added to the #mw-teleport-target element used by 2017 wikitext editor for its preview, .mw-body is obviously not. Was this overlooked? .vector-body is obviously skin-dependent, but at least it provided a way for styles to be reused in other places.

In terms of MediaWiki:Common.css I am not sure why you want to apply styles to both scenarios given the render environment is very different but if you must, you should just use blockquote or two selectors and possibly some !importants and be wary of these guidelines which don't require providers to communicate any changes - for this reason you'll likely want your styles to be defensive e.g. !important and overriding defaults where necessary.

So what you're basically saying is "the render environment is very different, so it's OK for the content styles to be hardcoded for a certain area of the page". I disagree with this (and the example of 2017 wikitext editor proves my point) – I believe these styles should be easily reusable. The idea is simply that users should be able to get the same viewing experience across different viewing opportunities. Skins should also have a say in how content is rendered in them, regardless of where it's located.

As it stands, I'm not 100% sure what's being asked here so could you please be more specific about what you are trying to achieve? e.g. when I do this THEN this doesn't work format? Thanks in advance and sorry I can't be more helpful at this stage!

Say, I actively use @SerDIDG's Instant Diffs which allows to open diffs and revisions in a popup. When I

1. go to https://en.wikipedia.org/w/index.php?title=User_talk:JWBTH/test&oldid=1221502162;
2. execute Instant Diffs mw.loader.load('https://commons.wikimedia.org/w/index.php?title=User:Serhio Magpie/instantDiffs.js&action=raw&ctype=text/javascript');;
3. click this icon
   
4. compare what I see with https://en.wikipedia.org/w/index.php?title=User:JWBTH/test&oldid=1221501802,

the result is different:

Body content	Popup

Again, in this particular example, the difference is minor – paragraphs have smaller margins, headings 4–6 look the same (but this leaves you asking "If the difference is that minor, why does it exist at all?"). In places other than English Wikipedia and in other skins this difference may be greater (an example is the blockquote in the task description).

Note that Instant Diffs does add .mw-body-content to its wrapper, as well as .mw-parser-output, and even tries to account for different skins, including with .vector-body:

			skinBodyClasses: {
				vector: [ 'vector-body' ],
				monobook: [ 'monobook-body' ],
				minerva: [ 'content' ],
				timeless: [ 'mw-body' ]
			},

So it does everything that a proper script should do. Still, the goal is not achieved.

And that's just one script. I'm sure the number of such scripts and gadgets will only increase with time. I'm actually writing one at the moment! This is part of the reason why I filed this.

Are you sure about that? Take 2017 wikitext editor.

An editor preview is rendering article content. A popup is rendering a summary. A summary is a derivative of the content which is a big difference. For instance we wouldn't float tables and images in a preview (in fact we go to lengths to strip those and choose a single image). We should think about blockquotes the same way.

The reason I mentioned .mw-body is that the Vector skin uses it for styling the content. This is part of the problem I'm trying to point out. If Vector used .mw-body-content, there would probably be no problem at all

This is a bug, and fixing it is tracked under T322573 so I propose we address that issue first and then reassess what's needed here.

(And also, well, no, it can pretty much be argued that Reference Previews/Tooltips should not render a summary, unlike Page Previews, and should indeed render the content, and any differences in how they render it compared to the reference section should be reduced to a minimum.)

Haha, I just came across T155863: MediaWiki has "content" styles applying only inside .mw-body, making them not reusable from 7 years ago, which reiterates my task but for 2017.

Would be good to just rescope all of these to .mw-parser-output IMO. That should indicate by default that whatever you put into it should be styled like page content does. And that class is pretty much stable, given that it is used in various parts of interface and in multiple extensions.

In T363657#9765302, @stjn wrote:

Would be good to just rescope all of these to .mw-parser-output IMO. That should indicate by default that whatever you put into it should be styled like page content does. And that class is pretty much stable, given that it is used in various parts of interface and in multiple extensions.

Content styles are not necessarily used for user-generated content, e.g. on https://en.wikipedia.org/wiki/Special:Version there are content styles and .mw-body-content, but no user-generated content and .mw-parser-output.

In T363657#9765380, @Jack_who_built_the_house wrote:

Content styles are not necessarily used for user-generated content, e.g. on https://en.wikipedia.org/wiki/Special:Version there are content styles and .mw-body-content, but no user-generated content and .mw-parser-output.

Those cases can be pretty easily fixed if it becomes a problem. I don’t necessarily see it as an issue (especially since .wikitable is not currently scoped to anything for example; maybe that should also be the case here).