# Customizing components with styling hooks and utilities

*Platform User Experience Designer Study Guide · Salesforce Lightning Design System (SLDS) · Last updated October 16, 2026 · https://www.certifyforce.com/study-guide/user-experience-designer/salesforce-lightning-design-system-slds/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.

- Certification: Salesforce Platform User Experience Designer
- Exam section: Salesforce Lightning Design System (SLDS)
- Study guide: https://www.certifyforce.com/study-guide/user-experience-designer

**Official exam objective:**

> Given a scenario, utilize SLDS to create new and customized component functionality.

## 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

| Fact | Detail | Source |
|---|---|---|
| Component hook prefix | `--slds-c-*`, one component only; SLDS 1 only | [Style Components Using SLDS Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties.html) |
| Shadow DOM | Parent styles don't reach into a child | [Style Components with CSS Stylesheets](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css.html) |
| SLDS in LEX components | No import or static resource | [Add Styles and Data to a Lightning Web Component](https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/add-styles-and-data-to-a-lightning-web-component) |
| LWC token syntax | `var(--lwc-brandAccessible)` | [Get Started with SLDS](https://trailhead.salesforce.com/content/learn/modules/lightning-design-system-development-for-designers/get-started-with-slds) |
| Grid breakpoints | small 480px, medium 768px, large 1024px | [Build with SLDS Components](https://trailhead.salesforce.com/content/learn/modules/lightning-design-system-development-for-designers/build-with-slds-components) |
| Grid columns | Up to 12 | [Grid (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/grid/) |
| slds-hidden vs slds-hide | Reserves space vs hidden from screen readers too | [Visibility (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/visibility/) |
| Truncated text | Full text in a title attribute | [Truncation (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/truncation/) |
| `<a>` as an action | Add role="button" and a Space key handler | [Buttons (SLDS 1)](https://v1.lightningdesignsystem.com/components/buttons/) |

## Check yourself

- 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?

## Sources

- [Style Components Using SLDS Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties.html)
- [Style Components with Lightning Design System](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-slds.html)
- [Style Components with CSS Stylesheets](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css.html)
- [Styling Hooks (SLDS 1)](https://v1.lightningdesignsystem.com/platforms/lightning/styling-hooks/)
- [Build with SLDS Components](https://trailhead.salesforce.com/content/learn/modules/lightning-design-system-development-for-designers/build-with-slds-components)
- [Understand SLDS Best Practices](https://trailhead.salesforce.com/content/learn/modules/lightning-design-system-development-for-designers/understand-slds-best-practices)
- [Get Started with SLDS](https://trailhead.salesforce.com/content/learn/modules/lightning-design-system-development-for-designers/get-started-with-slds)
- [Grid (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/grid/)
- [Visibility (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/visibility/)
- [Truncation (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/truncation/)
- [Add Styles and Data to a Lightning Web Component](https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/add-styles-and-data-to-a-lightning-web-component)
- [Buttons (SLDS 1)](https://v1.lightningdesignsystem.com/components/buttons/)
- [Learn the Elements of an Accessible Webpage](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/learn-the-elements-of-an-accessible-webpage)
- [Document Design Guidelines and Specifications](https://trailhead.salesforce.com/content/learn/modules/systems-design-with-slds/document-design-guidelines-and-specifications)
- [Learn About Visual State Indicators](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/learn-about-visual-state-indicators)
- [Visual Design Considerations and Styling Options](https://trailhead.salesforce.com/content/learn/modules/lex_dev_visualforce/lex_dev_visualforce_design)
- [Apply Systems Design Principles](https://trailhead.salesforce.com/content/learn/modules/systems-design-with-slds/apply-systems-design-principles)
- [Margin (SLDS 1)](https://v1.lightningdesignsystem.com/utilities/margin/)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 21 linked practice questions, and unlimited timed mock exams are included with the Platform User Experience Designer pack (USD $19): https://www.certifyforce.com/practice-exams