SSS Code & Style Safety Guide: Check CSS, Preview & Publish
Code is for custom CSS. CSS changes how a page looks. It should not run programs, collect information, or change account actions.
The safe CSS workflow
- Write: add CSS only. Do not add
<style>or<script>tags. - Check: choose Check CSS. Read the first problem message.
- Preview: inspect the Private Draft on desktop and phone.
- Publish: publish only after the latest CSS passes.
Tools inside Code
Find
Search for a word inside your CSS.
CSS editor
Write CSS for the selected Whole Home or Room.
Style Safety
Finds broken CSS and blocks unsafe code.
Checked CSS
Shows the safe version that Preview will use.
Profile shortcuts
Helps you choose stable SSS page parts without guessing.
Safety tips
Reminds you about focus, motion, forms, links, and buttons.
Where your CSS applies
Whole Home CSS
Becomes the shared style for Rooms that follow Whole Home.
Room CSS
Belongs to that Room’s Private Draft.
Publish destinations
The selected destinations receive the design only after publishing.
Classic Backup
Edits the public Whole Home directly and uses a different save process.
What not to add
- Do not paste
<style>or<script>tags. - Do not add links that try to run commands.
- Do not import code from unknown websites.
- Do not use huge fixed boxes that cover the whole page.
- Do not hide the visible outline used by keyboard users, text cursors, links, or buttons.
- Use broad
!importantrules only when you truly need them.
When a normal Studio setting can do the job, use that setting first. It is easier to understand and easier to undo.
Animations and reduced motion
Some visitors ask their device to reduce movement. Custom animations should respect that choice.
@keyframes softPulse {
from { opacity: .85; }
to { opacity: 1; }
}
[data-sss-component="profile-header"] {
animation: softPulse 1.8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
[data-sss-component="profile-header"] {
animation: none;
}
}CSS made by Layout
Layout can move sections without CSS. Some section style choices create CSS. Choose Send CSS to Code, check the new CSS, then Preview and Publish.
What the check messages mean
No check needed
There is no new CSS waiting.
Check CSS required
CSS was added or changed.
CSS passed
The latest CSS can be previewed and published.
Check is out of date
The CSS changed after the last pass.
Problem found
Fix the first clear problem, then check again.
Style Safety unavailable
Open Support. The problem is with the tool, not necessarily your CSS.
Small, safe examples
Give links a clearer underline
a {
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}Make cards gently lift on hover
[data-sss-component="widget"] {
transition: transform .2s ease;
}
[data-sss-component="widget"]:hover {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
[data-sss-component="widget"] {
transition: none;
}
}Common fixes
Publish is locked
Run Check CSS again and fix the first problem message.
The CSS check is out of date
Something changed after the last pass. Check the latest CSS.
A link or button stopped working
Remove rules that hide it, cover it, or change its cursor.
Text boxes have the wrong cursor
Remove the broad cursor rule or restore cursor: text for text boxes.
The page is slow
Reduce blur, large shadows, full-page animation, and too many moving parts.
You cannot find the problem
Undo the last code change or reopen a restore point.
FAQs
Do I need CSS to use SSS Studio?
No. CSS is optional.
Why must I check CSS again?
The check must match the exact CSS you are about to publish.
Can a Room have different CSS?
Yes, when Code is available for that Room.
Where should I move profile sections?
Use Layout. Use CSS mainly for appearance.
What is the safest way to learn?
Make one small change, check it, preview it, and keep a restore point.
