Question 82 - Certified User Experience Designer discussion

Styling hooks are CSS custom properties that allow developers to customize the appearance of base and custom components in a consistent and supported way. They work with web components and shadow DOM, which provide encapsulation and modularity for LWC. Styling hooks use the--sldsnamespace and follow a naming convention that reflects the component, category, property, attribute, and state of the element being styled. For example,--slds-c-button-brand-color-background-hoveris a styling hook for the button component, brand category, color background property, and hover state. Styling hooks can be declared in the CSS file of the LWC or in a global CSS file that affects all components on the page. Styling hooks are not standard CSS properties, but custom ones that are defined by SLDS and applied to the components using thevar()function.Reference:

Styling Hooks - Lightning Design System

SLDS Styling Hooks | Lightning Web Components Developer Guide | Salesforce Developers

--dxp Styling Hooks | LWR Sites for Experience Cloud | Salesforce Developers

The Salesforce Lightning Design System (SLDS) styling hooks use standard CSS properties to easily style base and custom components. Salesforce documentation states that ''SLDS styling hooks are CSS classes that give you access to the same styling used in the Salesforce Lightning Design System. They make it easy to style base and custom components with the same look and feel'' [1].

[1]https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_slds_styling_hooks