A little update after the latest patch available at https://gerrit.wikimedia.org/r/#/c/170936/, which includes the new stuff done in master such as using data-mw.body.id, removing state from the Cite extension, etc.

First, here's some data on how the HTML changes between Cite.php, current Parsoid HTML and the proposed new Parsoid HTML to style it with CSS.

For a simple wikitext

A <ref>simple</ref>
<references />

PHP:

<p>A <sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span>[</span>1<span>]</span></a></sup></p>
<ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text">simple</span></li>
</ol>

Current parsoid:

<p>A <span about="#mwt2" class="reference" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref"
           data-mw='{"name":"ref","body":{"id":"mw-reference-text-cite_note-1"},"attrs":{}}'>
    <a href="#cite_note-1">[1]</a>
</span></p>
<ol class="references" typeof="mw:Extension/references" about="#mwt4"
      data-mw='{"name":"references","attrs":{}}'>
    <li about="#cite_note-1" id="cite_note-1">
        <span rel="mw:referencedBy"><a href="#cite_ref-1">↑</a></span> <span id="mw-reference-text-cite_note-1" class="mw-reference-text" data-parsoid="{}">simple</span>
    </li>
</ol>

New proposed HTML:

<p>A <span about="#mwt2" class="mw-ref" id="cite_ref-1" rel="dc:references" typeof="mw:Extension/ref"
           data-mw='{"name":"ref","body":{"id":"mw-reference-text-cite_note-1"},"attrs":{}}'>
    <a href="#cite_note-1" style="counter-reset: mw-Ref 1;"><span class="mw-reflink-text">[1]</span></a>
</span></p>
<ol class="mw-references" typeof="mw:Extension/references" about="#mwt4"
      data-mw='{"name":"references","attrs":{}}'>
    <li about="#cite_note-1" id="cite_note-1">
        <a href="#cite_ref-1" rel="mw:referencedBy"><span class="mw-linkback-text">↑ </span></a> <span id="mw-reference-text-cite_note-1" class="mw-reference-text" data-parsoid="{}">simple</span>
    </li>
</ol>

The main differences are:

• Changed the classes to avoid interference with the current CSS, and also make them all start with mw-ref.
• Added counters to allow styling of reference links.
• Added extra HTML for clients that don't support the necessary CSS to display the new styling, they'll render a style similar to the default one.

Visual rendering
Now, let's look a few screenshots. First off, the current PHP rendering:

Here's the current Parsoid rendering:

This is how the new Parsoid output renders, with the new CSS loaded:

And this is how the new Parsoid output looks in browsers that don't support CSS counters:

Interaction with Visual Editor
Here's how the current Parsoid output is rendered in VE:

And here's how it looks with the new Parsoid HTML but no new CSS loaded (mostly the same as the last case):

In contrast, here's how it looks if we load the new CSS (by hackily patching content.parsoid.less, a more permanent solution TBA):

The link repetition is due to VE removing the contents of the reference span and substituting with a new <a> that doesn't have the same class. I think this last change was introduced recently, as this same test about a month ago gave better results iirc.

Next steps

• Develop a ResourceLoaderFileModule to correctly serve the new CSS from the Cite extension (in progress).
• Update the patch tests so it merges cleanly into Parsoid once everything else is ready (in progress).
• Investigate how to get the new HTML and CSS to properly display in VE. This would mean that the change from normal view to VE wouldn't change the perceived rendering of <ref>s.