What is the best way to edit custom CSS for the same section on a page without causing ove

[ilanusse]

Hi. I'm a relatively new Shopify dev and already have encountered multiple situations where I need to edit two pre-made sections on the same page differently.
At first, I used the section ID to make the custom CSS precise on each section, but later realized that when duplicating themes, this ID changes as it is assigned dynamically. 
Then, I started duplicating the section files so that each section had a different liquid and CSS file. But then realized that this might not be the best solution yet because it makes you have a collection of different sections even if you only want to make small changes. 

What would be the best way to target this issue? Maybe it is still duplicating the file, but I think there might be a better and more effective solution. 

[PaulNewton]

Hi @ilanusse 👋 Use custom-css settings if the CSS needs to be merchant/staff facing, or accessible in the visual theme editor.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

Otherwise in liquid itself use and get the actual section.id, not the section ID html attribute value, 

<div class="{{ section.id }}--variationA"></div>

<style> #{{section.id }}--variantionA { color: red; }

See the dawn theme reference for css use cases

https://github.com/Shopify/dawn 

[ilanusse]

Hi Paul! Thanks for your insight. 

Custom CSS settings in the theme editor works well with small codes. But when trying to modify the entire section this falls short. 

I like the second solution you propose. But I think it has a flaw too: the CSS will not be on your CSS files but in the liquid ones. A possible solution but I wonder if it is the optimal one...