In Squarespace, what are the differences between #block-yui and #yui selectors?

In Squarespace there are some unique naming conventions for the classes and IDs on Squarespace, as well as some more obvious ones that are more self explanatory, like “site” and “Header”.

The main ones to be aware of are:

  • Collection IDs

  • Item IDs

  • YUI IDs

  • Block IDs

  • Classes

Collection IDs

Every Squarespace site comprises of various Collections, and each Collection is assigned an ID.

A Blog or Gallery is a Collection, and so is a (normal) Page. It's safe to use and is most valuable for making CSS changes to just one page, blog, or gallery. The Collection ID is always in the body tag and always starts with collection- followed by a random series of number and letters like this: collection-436fdec1c5b11b65476576a2.

Item IDs

In a Blog or Event Collection, you'll find that each post has an Item ID that looks very similar to the Collection ID, for example item-773432dfdd2e6b0db1daca6c545. These are also safe to use and are ideal for customising an individual post.

YUI IDs (Not Safe to Use)

These will appear throughout your page but beware the YUI IDs! These IDs are dynamically generated on page load by the YUI Javascript library underpinning Squarespace. If an ID starts with YUI, don't use it in your code or CSS, as your code will break the next time the page is refreshed or edited. These IDs look something like this: yui_4_23_1_2_4197904677657_302.

Block IDs

A better way to target elements within a page is to use Block IDs. These have 'yui' within the ID, but they never start with 'yui'; they always start with 'block'. They're safe to use and they are assigned to each and every Block that you add to your site. They look like this: block-yui_2_23_2_3_4356732145534_6467.

Classes

All Blocks have a class name specific to them and these are really useful for adjusting every Block of the same type on your site. Combine them with Collection IDs to adjust every Block of the same type on just one page. Blocks usually have fairly obvious class names such as “image-block” and “code-block”.

Lastly, don't forget that in CSS, IDs need to be prefixed with a hash (#) character and classes prefixed with a dot (.) character.