I bumped into this while trying to style a way to long link in an infobox, but found out I could not use the usual tricks to shorten the link content, because I could not properly target the span-elements containing the link. And yes, there are suboptimal alternative solutions, but missing one or more classes to target seems like an omission (or error). And (2) yes, it is possible to traverse the tag-soup by a js-function and add classes, but that is an unnecessary hack.

A call like

moin
{{#statements:P856|from=Q291644}}

gives

xml
<span>
  <span>
    <a rel="nofollow" class="external free" href="http://www.erna.no/">http://www.erna.no/</a>
  </span>
</span>

which isn't quite easy to style. I guess some span-elements are put in there to give somewhat better control on the created layout, especially if there are several of them or qualifiers and sources are added.

It would be better if the spans says something about what's inside. For example that first span has wb-single-claim wb-external-link and outer has wb-multi-claim wb-external-link. They could even have data-claim="P856".

xml
<span data-claim="P856" class="wb-multi-claim wb-external-link">
  <span class="wb-single-claim wb-external-link">
    <a rel="nofollow" class="external free" href="http://www.erna.no/">http://www.erna.no/</a>
  </span>
</span>