Why use {{section.id}} in div tag instead of specific section name?

Something I’ve noticed is that in the theme code, there is liquid objects in the div tag, if I’m working on a specific section, what exactly is the purpose of having a {{section.id}} for example, if all of the code I write for that section applies to only that specific section.

for example:

if I’m working on a newsletter section, why would a person write:

div class=“section-{{ section.id }}”

instead of

div class =“section-newsletter”

Hey @bxaanca ,

section–{{ section.id }} outputs something like this

sections--21974989209878__footer

It’s not “section-newsletter”, so even when you reuse certain sections like “Image and Text” or other sections, they all have unique ID’s and you can apply individual CSS based on those ID’s

Thank you for this!

Can I better know what exactly you mean by ‘reuse’? Do you mean if someone wants to copy and paste the same contents within a div tag for a different section, or if someone wants to use the same contents within the same section for a different div tag?

Oh no. I mean if you create a custom section in shopify, someone will use that section in the theme customizer for their website.
What I mean are these sections,

And as you know, I can use Rich text section in my website however many times I want (That is what I mean re use. In user perspective, not a developer perspective) . The section.id part makes sure each of those rich text sections has a unique ID so if I ever wanted to apply CSS styles for the first Rich text section, the others are not affected. Same goes for javascript. I can target each section individually.

That makes a lot of sense, thank you!