function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jason Post 2Jason Post 2 

Why pattern in trailhead of putting classes in spans?

I'm going thru the Lightning Design System trailhead, and on part 5 it ocurred to me, why is there the pattern of putting classes in enlcosing span tags vs adding the class to the element? Does this have something to do with LDS? An example in the trailhead of an img enclosed by a span with classes in the span is: 
<span class="slds-avatar slds-avatar--large">
      <img src="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/images/avatar1.jpg')}" alt="portrait" />
</span>

What's the reasoning of the ablove pattern vs putting the classes on the img tag like so: 
<img class="slds-avatar slds-avatar--large" src="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/images/avatar1.jpg')}" alt="portrait" />



 
James LoghryJames Loghry
Most of the SLDS or Lightning Design System functionality is container and span driven.  If you check out the examples on lightningdesignsystem.com you'll notice they too use spans.  Trailhead is simply following that same pattern.
Jason Post 2Jason Post 2
@James, yes, but why that pattern of extra spans vs putting the class on the img element itself?