Squarespace Just Made Coding SO Much Easier! CSS Section Naming Explained
Squarespace has just rolled out a powerful new feature: section naming.
While the update may appear subtle, it introduces significant improvements for web designers and developers - especially those working with custom code.
If you're building advanced websites or managing large-scale projects on Squarespace, this change can dramatically streamline your workflow.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
What Is Section Naming in Squarespace?
Section naming allows users to give custom names to page sections in anchor link settings. While this feature was primarily introduced to simplify internal linking and navigation, it has another lesser-known benefit - targeting sections with CSS and JavaScript more efficiently.
The Traditional Way of Applying Code
Before section naming, applying code to a specific section required identifying a unique, randomly generated section ID. This was a cumbersome process. You had to:
Use a block ID finder tool
Locate the random alphanumeric section ID.
Apply your custom code to that ID within Squarespace’s Custom CSS or code injection areas.
The biggest drawback? When duplicating pages, the code did not carry over properly because section IDs changed. This created repetitive, time-consuming work, especially for developers managing large projects or complex designs.
Why Section Naming Is a Better Solution
With the new section naming capability, you can assign a human-readable name to a section, like “red” or “left-image” and target that name directly in your CSS. For example:
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
#RED {
p {
font-color: red !important
}
}
This method brings several major benefits:
Future-proofing: When you duplicate a page, section names remain the same, so your code stays intact.
Team collaboration: It becomes easier for team members to maintain or expand the site without having to reassign code.
Code reusability: Apply consistent styling across multiple pages without needing to update IDs.
Improved efficiency: Saves hours of development time across larger builds.
Key Considerations
Keep in mind that if you are using anchor links for navigation, you should ensure naming conventions remain consistent and unique. But if you’re primarily using section naming for code targeting, this feature is a must-use in your development toolkit.
Final Thoughts
Squarespace’s section naming feature is more than a UX enhancement, it’s a development breakthrough. It empowers designers and coders to build more efficiently, duplicate with confidence, and maintain websites at scale. If you’re not yet using this in your workflow, now is the time to start.
