A UX Design team is doing a review of a new Lightning Web Component (LWC). They are following the Salesforce Lightning Design System (SLDS) block, element, modifier (BEM) naming conventions. Which class does NOT follow this convention?
The correct answer is C. `slds--size-1-of-2`, which the uploaded study guide explicitly identifies as the class that does not follow the expected SLDS convention. SLDS uses a structured naming system derived from Block-Element-Modifier (BEM) conventions. Salesforce documentation describes a block as the primary component, an element as a constituent part represented with a double underscore, and a modifier as a variation or state.
Current Salesforce guidance is particularly relevant here. Modern SLDS notation uses the single underscore for modifier syntax. For example, `slds-avatar_circle` correctly represents the circular avatar variant. `slds-box` is itself a valid SLDS utility/component class. Salesforce also confirms that older double-dash modifier syntax has been deprecated in favor of the single-underscore convention. Option C is malformed because the separator appears immediately after the `slds` namespace: `slds--size-1-of-2`. Even historical sizing syntax would have been structured around the size class, such as `slds-size--1-of-2`, rather than `slds--size-1-of-2`. Modern notation uses forms such as `slds-size_1-of-2`. Therefore, C clearly violates the expected SLDS class structure.
Study Guide reference/topics: SLDS, BEM naming, CSS classes, modifiers, Lightning Web Components.
==================================
Contribute your Thoughts:
Chosen Answer:
This is a voting comment (?). You can switch to a simple comment. It is better to Upvote an existing comment if you don't have anything to add.
Submit