9 Common Mistakes to Avoid When Writing Custom CSS in Squarespace
1. Over-Qualifying CSS selectors
CSS selectors that are over-qualifying, or too specific, can cause sloppy code that is hard to read and edit properly, and it can cause problems when you try to write more code in the future. When you use highly specific selectors all the time, it can creep up over time causing future overrides to not work. Ultimately, you end up fighting against your own code because there is not enough room for more specific CSS selectors.
How to write simple CSS selectors
Low specificity selectors refer to CSS selectors that are as simple as possible. This means using minimal descendant selectors (select elements nested within an element) and chained selectors (select elements with multiple attributes or classes) unless absolutely necessary.
Sometimes, using really specific CSS selectors is unavoidable, because since Squarespace already has a lot of pre-built CSS style sheets that use !important rules and other highly specific CSS selectors, we will sometimes be forced to use highly specific selectors. Still, a good rule of thumb is to make your selectors as simple as possible, and only use the !important rule when you absolutely need to (more about this in the next section).
To make your selectors as simple as possible, I recommend using Chrome DevTools to view what selector is currently being given precedence to the CSS property you’re hoping to override, and then write a selector in your Custom CSS editor that matches that specificity exactly. This way, you will be sure to override the property while not over-qualifying your selectors.
2. Overusing the !important rule
The !important rule basically overrides every other CSS selector. It’s like you’re saying, this rule is more important than all of the other CSS rules.
Now, after defining what the !important rule does, and after reading the previous point about keeping CSS selector specificity as low as possible by not over-qualifying selectors, you might be thinking “I can just throw an !important tag here and be done with it. Then, I won’t have to worry about making my CSS selectors the perfect level of specificity.” Well, that’s not exactly the best approach, either.
If you keep using the !important rule as a strategy for overriding previous CSS rules, you’ll eventually get to a point where you can’t write any more code to style a specific element without getting even more specific with your selectors, at which point you can see how the sloppiness builds up over time and the maintainability of your code suffers.
There are only 2 scenarios where using the !important rule is justifiable: when you need to override an inline-style of an element, or when you need to override another !important rule that’s already being applied. You’ll likely encounter both of these scenarios when writing CSS in Squarespace, because the platform already has a bunch of CSS that is built into each template.
3. Neglecting to organize related CSS rules with comments
Adding comments to your code editor is one of the best ways of maintaining a clean code editor. Comments make it very clear what each block of code does and why it is important so that whoever else is reading or editing the code has a better idea of how to modify it.
There are two ways to add comments to CSS code: multi-line comments and single-line comments, but because multi-line comments are notorious for cluttering up CSS, I will only be showing you how to use single-line comments. I would recommend using single-line comments as starting and ending tags of a block of code - this way, you know exactly where a block of code starts and where it ends. Here is what that looks like in action:
//Start: Make paragraphs blue
p {
color: blue;
}
//End: Make paragraphs blueTo give you a better idea of the power of well-written comments, let’s look at the following examples. The image on the top is an example of the Custom CSS editor with comments written as start and end tags, and the image on the bottom shows the CSS editor with no comments. You can see how much easier it is to know which blocks of code do what in the top image. This gives you the ability to edit and delete code more confidently.
Custom CSS editor with well-written comments. You can clearly see where each group of related CSS starts and ends.
Custom CSS Editor with no comments. It’s much harder to see what each line of CSS does without having to spend a long time examining each rule.
4. Neglecting to use CSS variables for more maintainable code
CSS variables allow you to declare CSS properties for static CSS rules. For instance, If you want to make all H1’s a certain color, you could declare a variable for heading 1 color; this allows you to use the variable in multiple CSS rules without the redundancy of using the same color multiple times, and it also makes it much easier to make changes to the code because variable names can be much easier to understand than CSS selectors.
See the example code snippets below to see this in action.
Declaring and Using CSS Variables
@heading1Color: blue;
h1 {
color: @heading1Color;
}
Here is a series of CSS variables used in the Mega Menu Plugin for Squarespace 7.1
5. Using redundant CSS selectors instead of grouping selectors
When you’ve been coding for a while, it can be easy to get a little lazy with making sure you’re writing your CSS using best practices. One of those best practices is to refrain from using redundant CSS selectors to apply the same property to multiple elements instead of using the grouping selector to apply the same property to multiple elements.
The grouping selector is when you separate individual selectors using commas to apply the same CSS declaration(s) to multiple elements.
Let’s look at the following example. In the first code block, you can see we are setting both h1 and h2 elements to be the color black (#000000) by defining 2 separate CSS rules. In the second code block, we can achieve the same thing by using one grouping selector. This way, it’s more manageable and cleaner.
//Two separate rules
h1 {
color: #000000;
}
h2 {
color: #000000;
}
//One grouping selector
h1, h2 {
color: #000000;
}6. Using absolute units for font sizes (like px) instead of relative units (like em)
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size no matter the screen size.
In comparison, relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium (screen sizes).
When you set the fonts of different text elements to be absolute units, like px, this means it will not change no matter the media device or font size preferences. It’s much better to use a relative unit like em, which sets the font size relative to the default or defined size of the element. This way, if the user changes their font size preferences on their device, the font size will scale right along with it based on the ratio of the relative unit.
Squarespace already lets us use relative units for the font sizes in the Design editor, but in case you find yourself setting the font size of something using custom CSS, keep this best practice in mind.
7. Using color names instead of hex color values (or rgb or hsl)
CSS allows us to define color values using predefined color names, such as blue, red, green, cornflowerblue, lightpink, and much more. However, because each browser can interpret these color names differently, you might find that your colors look a little off between different browsers.
This is why it’s better to use exact hex, rgb or hsl color values instead of the predefined color names.
8. Writing CSS that actually hurts your websites user experience
CSS is a great tool for creating captivating and functional websites, but just like anything else in this world, it can have harmful effects if misused.
User experience (UX) refers to the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use. In terms of browsing a website, it’s how easily the user is able to navigate your main menu, find what they are looking for, and ultimately take an action (i.e. fill out a form or buy a product) on both desktop and mobile.
One common theme I see with some web designers and or regular site owners who attempt to customize their own sites with CSS is adding CSS effects, like flashy animations or distracting hover effects that hinder the user from performing a wanted action on your site. Most times, they are implementing CSS that they think looks cool or interesting at the expense of having a functional website.
When you’re writing custom CSS for your Squarespace site, it’s crucial that you keep the user experience at the forefront of your designs so that your customizations don’t end up hurting your US, and ultimately your conversions.
For a comprehensive analysis on whether your CSS is having a positive or negative effect on your site’s UX, check out my blog post Is Your Squarespace Custom CSS Hurting or Helping Your Site?
9. Writing CSS that works for one layout, but messes up an alternate layout.
Certain Squarespace blocks and collection pages have CSS selectors that differ based on the layout being used.
For instance, Squarespace image blocks have 6 different layouts you can use in the Classic Editor: Inline, Poster, Card, Overlap, Collage, and Stack. Some of the CSS selectors for each of these are different and some are the same, so if you write some CSS that you meant to apply to Card image blocks, it might not look as expected on the other image block layouts.
You’ll want to make sure your CSS is not messing up blocks or collection pages that use different layouts by using the appropriate selectors. If you need some extra help with using the right selectors, check out the Squarespace 7.1 CSS Selector Guide & Cheatsheet, which provides a detailed breakdown of these different selectors.
