CSS Section IDs Change When Duplicating Theme

Technical Q&A
1

With OS 2.0 themes, is there a better way to select sections instead of their section IDs?

I recently moved to a new OS 2.0 Theme, Dawn. The process wasn’t too bad, but I realized that some of the custom CSS I put in wasn’t working when I duplicated the theme. I dug into it a little further, and it looks like the ID selectors were changing every time I made a copy of the theme.

For example, I would insert something like

#shopify-section-template--15162958741660__16437546287058f676 {
    padding-top: 0px;
}

in the CSS file. But when I duplicate the theme, I would have to change the CSS to

#shopify-section-template--15164442083484__16437097862e969863 {
    padding-top: 0px;
}

instead. I’ve made quite a few custom edits on the website, and would prefer to be able to back up my changes in case I needed to revert them!

Does anyone know of where I could find a “safer” identifier to use, so I don’t have to manually find the new IDs for each custom code I put in?

2

I also have been frustrated by this. Much of it can be solved by giving the section a CSS class in the customizer, but there are section elements that the CSS class won’t work on. It would be nice if the section ID was preserved when making a copy of the theme.