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.
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="β¦" />