Customizing components with styling hooks and utilities
Customizing Lightning components the supported SLDS 1 way: base components, utilities, styling hooks, then blueprints; why parent CSS can't reach a child's shadow DOM; deliberate token use; the responsive grid, visibility and truncation utilities; CSS hygiene and troubleshooting; SLDS in new Visualforce; buttons, links and states.
Given a scenario, utilize SLDS to create new and customized component functionality.
~7 min read · 21 practice questions ·
What the exam expects
- Choose base components, utilities, styling hooks or a blueprint in the right order when customizing a component.
- Explain why a parent's CSS can't restyle a child base component, and what to use instead.
- Reference design tokens correctly and deliberately in LWC CSS.
- Specify responsive grid, visibility and truncation utility classes.
- Review custom CSS against SLDS best practices, troubleshoot overrides, and specify interaction states and accessible buttons, links and icons.
Key terms: component styling hook (an --slds-c-* CSS custom property that customizes one SLDS component); shadow DOM scoping (a component's styles apply only to that component); utility class (a single-purpose SLDS class such as slds-m-around_medium); mobile first (default sizes apply to the smallest screen, prefixes scale up); override (custom CSS that cancels an SLDS class instead of extending it).
Key facts
- Detail
--slds-c-*, one component only; SLDS 1 only
- Detail
- Parent styles don't reach into a child
- Detail
- No import or static resource
- Detail
var(--lwc-brandAccessible)
- Detail
- small 480px, medium 768px, large 1024px
- Detail
- Up to 12
- Detail
- Reserves space vs hidden from screen readers too
- Detail
- Full text in a title attribute
<a> as an action- Detail
- Add role="button" and a Space key handler
Sources for this section (9)
- Style Components Using SLDS Styling Hooksdeveloper.salesforce.com (opens in a new tab)
- Style Components with CSS Stylesheetsdeveloper.salesforce.com (opens in a new tab)
- Add Styles and Data to a Lightning Web Componenttrailhead.salesforce.com (opens in a new tab)
- Get Started with SLDStrailhead.salesforce.com (opens in a new tab)
- Build with SLDS Componentstrailhead.salesforce.com (opens in a new tab)
- Grid (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Visibility (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Truncation (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Buttons (SLDS 1)v1.lightningdesignsystem.com (opens in a new tab)
- Why can't a parent component's CSS recolor the buttons inside lightning-button?
- When should a team start from an SLDS blueprint?
- Which class hides an element but keeps its space?
- Why use a link rather than a button for View All?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Platform User Experience Designer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 22 lessons of the Platform User Experience Designer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (21 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams