Compare AVO 🥑 and standard BEM Conventions

AVO 🥑 : BEM (standard) syntax comparison

This is a chart, mapping AVO 🥑 syntax to standard BEM verbiage.

AVO 🥑 is a syntactive dialect of BEM’s Block, Element, Modifier constructs.
This reference describes AVO 🥑 naming conventions in BEM terms — as defined on bem.info.

AVO 🥑 : BEM (standard) syntax comparison
- Block
- Element
- Modifier

Block

A functionally independent component that can be reused.

/* BEM */
.avatar {
}

/* AVO 🥑 */
[data-avatar] {
}

<!-- BEM -->
<img class="avatar" src="…" alt="…" />

<!-- AVO 🥑 -->
<img data-avatar src="…" alt="…" />

Element

A composite part of a block that can’t be used separately from it.

/* BEM */
.avatar {
}
.avatar__img {
}

/* AVO 🥑 */
[data-avatar] {
}
[data-avatar--img] {
}

<!-- BEM -->
<span class="avatar">
  <img class="avatar__img" src="…" alt="…" />
</span>

<!-- AVO 🥑 -->
<span data-avatar>
  <img data-avatar--img src="…" alt="…" />
</span>

Modifier

An entity that defines the appearance, state, or behavior of a block or an element.

/* BEM */
.avatar--status_ok {
}

/* AVO 🥑 */
[data-avatar~='status:ok'] {
}

<!-- BEM -->
<img class="avatar avatar--status_ok" src="…" alt="…" />

<!-- AVO 🥑 -->
<img data-avatar="status:ok" src="…" alt="…" />