Skip to content

ABEM. A more useful adaptation of BEM.

From CSS-Tricks

css
/* Standard BEM */
block-name__element-name--modifier-name

/* ABEM Approach */
[a/m/o]-blockName__elementName -modifierName

Example:

css
/* Atoms */
.a-button {
}
.a-button__icon {
}

/* Molecules */
.m-card {
}
.m-card__title -large {
}

/* Organisms */
.o-header {
}
.o-header__logo {
}
.o-header__logo -large {
}

TODO: Add more content here.