4 tips to improve your Squarespace customization workflow

• 00
• 01
• 02

If you’ve been working with Squarespace customizations for a while, chances are you’ve found yourself wasting valuable time looking through your +1000 lines of code for different snippets, to tweak colors, fonts, and sizes, based on client feedback.

If that sounds familiar, then today’s video is for you!

We’ll be looking at 4 different tips you can apply to your next project (or even your current one!) to make sure that changes to your client websites become much easier to handle.

Let’s jump right in!

Tutorial

Overview & timestamps

You can use these tips on both Squarespace 7.0 and 7.1, and I highly recommend you start applying them as you write or add code to the site, to make things more manageable.

The idea is to save time, so try not to leave ALL the grouping/nesting tips for the end of the project!

1. (4:13) – Grouping selectors
   The first tip is to, whenever possible, group selectors that are targeting different elements but applying the same styles, inside the same snippet.
   Doing this will make it a lot easier to a) keep your code slightly shorter, and b) find elements of the website that you’ve styled the same way in the same place. In turn, allowing you to make modifications to several elements at the same time.

2. (6:02) – Nesting snippets
   Similar to grouping your code, this tip will help you “wrap” different elements that belong to the same container under one same selector, help you write less code, AND allow you to modify things more easily if that “wrapping” container changes. This is particularly useful when making changes to specific index sections in Brine or 7.1!

3. (8:15) – Using a secret keyboard shortcut
   If you have several snippets that carry different properties but use the same value, you can use this little trick to alter all of them at the same time.

4. (11:11) – Using variables

   The holy grail of customization efficiency! You can use variables in your code to add the same value to multiple snippets, without having to repeat the actual value over and over again.
   Doing this will make it a breeze to make cosmetic changes to your client’s site, since you'll only need to alter the corresponding value ONCE and the change will apply to everything that’s using that variable.

Pretty cool, right?

Until next time,

B.