How do you use SLDS (Salesforce Lightning Design System) in LWC?
Suggested answer
SLDS is available automatically in LWC without any import — just use the CSS class names directly in your HTML template. Key SLDS concepts:
1. Utility Classes: slds-m-around_medium, slds-p-horizontal_large for spacing.
2. Grid System: slds-grid, slds-col for layouts.
3. Forms: slds-form-element, slds-form-element__label.
4. Components: Use base Lightning components (lightning-input, lightning-button, lightning-card) which are pre-styled with SLDS.
5. Icons: lightning-icon with SLDS icon names. Best practice: use base Lightning components wherever possible — they handle SLDS, accessibility, and mobile responsiveness automatically. Custom styling should use CSS custom properties (design tokens) rather than overriding SLDS classes.
Practice content for interview preparation; not an official vendor answer. Verify details against current product documentation.
Community comments (0)
No comments yet.
Sign in or create a free account to add a comment. Comments are moderated before they appear.