How to add notes to Squarespace CSS

Customizing your Squarespace site with code can be daunting, especially if you're a beginner. That's why it's important to have a strategy for organizing and keeping track of your work, and one way to do this is by adding notes to your custom CSS file. 

Using notes will help you stay organized and makes it easy to quickly find the code you need when making changes or troubleshooting problems.

Keep reading and we'll take a look at why adding notes is essential and how to do it yourself.

Why Add Notes?

The importance of keeping a neat and tidy custom CSS file cannot be overstated.

When you're working with a lot of code, it can be easy to get lost in the details and forget where certain pieces of code are located or what they were used for in the first place. 

Adding notes helps you stay organized by providing context for each piece of code, which makes troubleshooting much easier.

It also makes it much easier to come back later and quickly find the code that you need without having to search through hundreds of lines of text.

How To Add Notes

Adding notes is actually quite simple; all you need is the right syntax!

In order for the browser to recognize your note as an actual note instead of code, you'll need to wrap them in /* (opening comment) and */ (closing comment).

Anything between these two symbols will not be executed as actual code but will still show up in the file so that you can reference it later on. 

Cool, right?

Here is an example from my own site at InsideTheSquare.co:

/* cookie */
.sqs-cookie-banner-v2 {border: 1px solid #000}

/* video */
.sqs-video-wrapper {border:1px solid #ddd}
.embed-block * {border-radius:15px!important}

Adding notes to your custom CSS file is an essential part of keeping organized while coding.

Not only does adding notes provide context for each piece of code, but it also makes it much easier to come back later and quickly find what you need without having to search through hundreds of lines of text. 

All it takes is knowing the right syntax: wrap your note in /* (opening comment) and */ (closing comment).

By taking just a few extra minutes now, you can save yourself hours down the road!

---