6 Do’s and Don’ts of Coding in Squarespace
CSS is usually the coding language that Squarespace Designers dive into when first starting to play with code. It is highly useful when making adjustments to ensure their client’s site is completely on brand and unique.
CSS can be easier to pick up than some of the other coding languages and small amounts can make a big difference in the style of an element. However, there are certain strategies to follow to ensure your CSS is efficient.
In this video, I show you six do’s and don’ts to keep in mind when using CSS in Squarespace.
1) The order of your CSS is very important.
CSS stands for Cascading Style Sheet which means it reads from top to bottom. If you write code to change the colour of a button to red and then underneath change it to blue, the blue code will override the red code. If you are not careful, this can lead to unnecessary code on your site or coding errors. I like to order my code so that CSS for the header is at the top. I then group the CSS by page and then my CSS for the footer is at the bottom. This keeps my code nice and organized and easier to find later one. Which leads me to my next point…
2) Always use comments to keep track of your work.
Comments are notes you can add inside of your CSS. I use this to remind myself what the CSS is for. This is especially helpful if you have used a block id or page id. If you have not left a note, it is nearly impossible so figure out what that code is for later on. You can add a comment with the following /* YOUR NOTE GOES HERE */. Anything between the /* and */ symbols will not be read as code.
3) DRY (Don’t Repeat Yourself).
The less CSS you can use to achieve your goal the better. Although CSS renders fast and if written correctly should not slow down your website, it is still a good idea to not have more CSS than you need. So, be sure to reuse or combine CSS that does the same thing. I also suggest regularly going through your code to ensure unused code is removed.
4) Avoid the !important Tag.
The !important tag can be a magical thing as it makes that piece of code a priority. However, you have had to use the !important tag because you are overriding CSS written above it. This means that your website has to compute the first CSS and then override it with your second. This doubles the amount of code needed to achieve the style you want. In an ideal world, you would not use the !important tag and just change the CSS written above. However, we cannot access Squarespace’s original CSS Stylesheet so unless you can make the change in the Style Editor, there may be times the !important tag is necessary. Just make sure that you are using it to override something Squarespace has in their original CSS and not code you have added yourself.
5) Keep your CSS in one place!
Organization is key to ensure that you are not duplicating code or leaving unneeded code hanging around your site. The best way I have found to do this is to keep all CSS in the Design > Custom CSS editor. If some of your CSS is in the Code Injection, some is in the Page’s Code Injection, and some is inline CSS on the page, it can be very hard to keep track. There are some exceptions to this rule (such as hiding the header and footer on a page) but for the most part, keep all your CSS is one place.
6) Be careful where you find your code.
There are many great places that you can find CSS for Squarespace such as blogs (like me!), YouTube and the Squarespace Forum. However, it is important that you are evaluating the code you are adding to your site. Anytime you copy and paste code, make sure you are following the above do’s and don’ts. Only you know what code you have on your site. So, it is important that you are keeping your code organized to ensure that you do not have any duplicates, that you are placing it in the proper order, and that you are keep comments and notes.
Because of this, be careful of Code Editors or programs that generate code for you as they may not be able to read what other code is on your site. Therefore these programs cannot generally optimize your code which can result in your website having a lot of unnecessary code or codes that clash.
All in all…
The main thing to keep in mind with CSS is organization. Make sure that you are keeping your code organized by keeping it all in one place, positioning it in the proper order, leaving comments or notes, not using duplicates or keeping unnecessary CSS, not overusing the !important tag, and being mindful of where you are getting your code.
