What's the rule of Vuetify to name elements?

[LikeDreamwalker]

I just read some articles about BEM. And cause I was using Vuetify at the beginning of my career so I am also naming elements like Vuetify does. So what's the rule of Vuetify to name elements, and what's the difference between BEM? They are related and similar, but I can't tell the differences.

<div class="v-responsive v-img rounded bg-surface" style="height: 185px; max-height: 185px; min-height: 185px;">
  <div class="v-responsive__sizer" style="padding-bottom: 64%;"></div>
  <img class="v-img__img v-img__img--cover" src="https://cdn.shopify.com/s/files/1/2695/0984/products/Frame1_fb06cb45-2f8f-4c80-a120-b57f153b1675.png?v=1665526427" style="">
</div>
<figcaption class="d-flex text-subtitle-2 align-center text-capitalize mt-3">
  <span>Vuetify 3 - Vite Theme FREE</span>
  <!--v-if-->
  <span class="v-chip v-chip--label v-theme--light text-primary v-chip--density-default v-chip--size-x-small v-chip--variant-tonal text-uppercase px-1 ms-2" draggable="false">
  <!---->
  <span class="v-chip__underlay"></span>
  <!---->
  <!---->
  <div class="v-chip__content"> Free </div>
  <!---->
  <!---->
  </span>
</figcaption>

The upper codes are from Vuetify's official homepage, and I can find Vuetify seems to use - to connect the element's name and -- to tell the element's status, but what does __ mean? Also, compared to BEM, they use __ to connect the element's name instead, but both use -- to tell the status.

[jacekkarczmarczyk]

in BEM in A--B__C, A is the block, B is element, C is the modifier
- means nothing, it's just a part v-chip name (block part)

[LikeDreamwalker]

I see, and that's much clearer. Thanks!

Also, there are class names in upper codes like bg-surface, text-primary, and mt-3, I wonder do these class names, like atomic class, still suit the BEM rule? Or they are all settled to be like ${styleSheetName}-${styleSheetValue}.
Maybe this question is unrelated to Vuetify, but I remember there are class names like mt--2 to set a negative value to margin-top, so is this the same rule I mentioned?

[jacekkarczmarczyk]

It's mt-n2 for negative values. Not a BEM though, just helper/utility classes with the convention you've mentioned (style-value)

[LikeDreamwalker]

I got it! Thank you so so much for replying.

[LikeDreamwalker]

I check again, and I wonder do you mean A__B--C, A is the block, B is the element, and C is the modifier.
I think in upper codes, v-img__img--cover, __img should be element, and --cover should be a modifier.
I think that's where I am confused, and I try to find more info that makes me understand:
BEM block, naming & nesting
And in this question from stackOverflow, I think I found the same result as Vuetify does:

BEM short form: block-name__element-name--modifier-name