Why this pattern - Span tags with class enclosing img in Lightning Design System?

Question

I was checking out the new Lightning Design System framework from Salesforce, and noticed there's a pattern of img tags inside of span tags. Reference link - https://www.lightningdesignsystem.com/components/images/

Example code:

<span class="slds-avatar slds-avatar--x-small">
    <img src="/assets/images/avatar2.jpg" alt="person name" />
</span>

Any ideas why they're using this pattern in LDS putting a class on an enclosing span img tag vs adding the class directly to img? The CSS doesn't appear to be dependent on a span selector.

Answer 1

This isn't a "definitive" answer, but it's one that seems logical to me. The Lightning Design System uses a CSS grid system or what many think of as a flexi-page. With a <span tag, the image will more readily float/adjust to accommodate variations in page sizes. If the CSS were inside the img selector, it wouldn't do that.

The LDS CSS needs to be able to detect the specific tags they're meant to act on while also adjusting to page size changes. In the example you cite, img is a child of <span>, the <span> can adjust with changes to the grid without disrupting the remainder of the intended attributes in the CSS a designer wants to have applied to that tag. If the CSS were in the <img> tag, many of it's attributes might change when accommodations are made for changes in the grid because of the device displaying the page.