Why This Is Useful
Eventually something in your Lightning Web Component needs to look different. A button needs centring, an element needs padding, something needs to be hidden on mobile.
You’ve got options. Inline styles (please no). A custom CSS file. Styling hooks. All fine.
But the quickest, simplest route, and the one that behaves properly on every device, is the SLDS utility classes. They’re already loaded. You just have to know they exist.
The Code
Say you’ve got a button sitting awkwardly on the left and you want it centred. Rather than writing CSS, add a class:
<template>
<lightning-button
label="Click Me"
class="slds-align_absolute-center">
</lightning-button>
</template>Save, deploy, refresh. Centred. No CSS file, no custom styles to maintain.
The Ones You’ll Use Constantly
slds-align_absolute-center <!-- dead centre -->
slds-text-align_center <!-- centre the text -->
slds-p-around_medium <!-- padding all round -->
slds-p-top_small <!-- padding on one side -->
slds-m-bottom_large <!-- margin -->
slds-hide <!-- hide it -->
slds-show <!-- show it -->
slds-text-heading_medium <!-- typography -->
slds-text-color_error <!-- red text -->
slds-truncate <!-- ellipsis on overflow -->
slds-box <!-- bordered container -->The spacing ones follow a nice predictable pattern: slds- then p or m for padding/margin, then the direction (around, top, bottom, left, right, horizontal, vertical), then the size (xxx-small through xx-large).
Learn that pattern and you can guess most of them correctly without looking anything up.
Why Not Just Write CSS?
Three genuinely good reasons.
1. Consistency. Your padding matches the padding everywhere else in Salesforce, because it’s the same variable. Hand-rolled CSS drifts, and users notice when your component sits slightly wrong next to everything around it.
2. Responsive for free. These classes already handle different screen sizes. Your custom margin-left: 12px does not.
3. Themes. When Salesforce updates the design system, or a customer applies a theme, utility classes follow along. Hardcoded values don’t, and then you’re hunting through components fixing colours.
Keep custom CSS for genuinely custom things. For spacing, alignment and typography, use what’s already there.
Where To Find Them
The full catalogue lives at lightningdesignsystem.com. Bookmark it. Every class has an example you can copy straight out.
One thing worth knowing: utility classes can’t reach inside a base component. You can position a lightning-button with them, but you can’t restyle its internals, because shadow DOM says no. For that you want styling hooks, which I’ve covered separately.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
