Custom CSS on a banner

Anyone have this moronic issue where you edit the CSS on a banner like:

#yui_3_17_2_1_1571080309234_318 .small-button-style-solid .sqs-block-button .sqs-block-button-element--small, .medium-button-style-solid .sqs-block-button .sqs-block-button-element--medium, .large-button-style-solid .sqs-block-button .sqs-block-button-element--large {
  font-family: 'recoleta';
  font-size: 12px;
  margin: -50px 0 0 0;
}

#yui_3_17_2_1_1571080309234_318 h2 { font-family: 'america';
font-size: 12px;
  color: #f15a24;
  margin: 0 0 22px 0;
}

#yui_3_17_2_1_1571080309234_318 h3 { font-family: 'america';
font-size: 10px;
  color: #f15a24;
  margin: -55px 0 22px 40px;
  text-transform: none;
}

#yui_3_17_2_1_1571080309234_318 { background: #ffd585;
 padding: 20px 20px 25px 70px;
}

Only to save it and refresh the page and the #ID changes???

Anyone know how to get a consistent selector to work?

Thanks

Hi @codeexist.

What you're encountering are dynamic IDs generated by YUI, a JavaScript framework that Squarespace uses. As that implies, such IDs will change on each page render. The first time a designer/dev runs into this issue, it definitely tries one's patience.

To resolve this, checkout this related answer over on SO, but you can find a whole bunch more posts/pages on this too. Take a look at those and you'll find what to do. In summary: use block IDs instead.