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:
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:
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)
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:
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.