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 👇

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:

1. Use a block ID finder tool

2. Locate the random alphanumeric section ID.

3. 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:

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

---

📩 Join the inner circle to get exclusive code updates

---

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.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?