Best practice for applying CSS to hundreds of block IDs across several pages?

Site URL: https://watermelon-koala-napg.squarespace.com/bio-archidex

Hello! I'm a decent programmer, although brand new to web dev and Squarespace.

I'm working on a website and have ~50 pages that all need to be styled in the same way. Each page has roughly 6-7 blocks that need custom CSS (identical across those pages), and there will be more of these pages in the future. These block types are used in several other ways in those pages though, so they can't be edited on a block-type basis.

I'm curious if there are recommended best practices for how to handle this.

As far as I can tell, the first obvious option is putting the CSS in the Custom CSS Editor, which would centralize any future changes, but create a gigantic list of 300+ impossible-to-parse block ID references. The second option is to duplicate the CSS on each page in a Code Block, which creates isolated, clean code, but will require 50+ edits for any future changes.

The ideal would be some way to tag blocks for targeted CSS, so each block with common CSS has a shared ID of some sort, and then I just apply CSS to that ID in the CSS Editor. There doesn't seem to be an immediately obvious way to do that though.

Any suggestions for how to approach the above?

Thanks for your help!

1 hour ago, DevDotEXE said:

I'm working on a website and have ~50 pages that all need to be styled in the same way. I'm curious if there are recommended best practices for how to handle this.

As far as I can tell, the first obvious option is putting the CSS in the Custom CSS Editor, which would centralize any future changes, but create a gigantic list of 300+ impossible-to-parse block ID references.

It's difficult to understand why you would need to target block IDs, except in a few rare circumstances, so I'd like to understand more about the specifics. Please provide us with a working link to some of the pages and explain what you need to change and why. 

If the site isn't live, you'll need to set a public password in the visibility settings and share it with us, otherwise we won't be able to view it.

For sure -- I just added a link to the question above. Password: singularity

It's for an upcoming game and there are many character pages formatted like the above.

It's very much WIP, but so far I've applied CSS for borders on the markdown block, clipping paths to tighten the borders, and height, width, and alignment to preserve good structure on mobile and tweak block spacing, etc. I anticipate I'll need to do quite a bit more targeted CSS before the design is really wrung out, unless I'm going about this in entirely the wrong way.

The current setup is that all the block-specific CSS is contained in a code block at the bottom of the page.

Thanks for the help!