CSS – No BEM

BEM is short for Block – Element – Modifier. It’s a CSS rules used by experienced front end developer.

For use case, Bricks7 uses AutoCSS, which is open source and can be downloaded from Github

We use EM, which is short for Element – Modifier.

This makes it quicker to type and makes more sense without using double underscores

Example of BEM

<button class="newsletter__button">
    Unsubscribe
</button>
<button class="newsletter__button newsletter__button--call-to-action">
    Subscribe
</button>

As you can see, it made sense, but this introduced a new problem. It’s slower to code.

Example of EM

<button class="btn-primary">
    Unsubscribe
</button>
<button class="btn-primary btn-outline">
    Subscribe
</button>

As you can see in the CSS classes, it’s much quicker and perfectly understood by other front-end developers.

AutoCSS uses EM

We deliberately chose EM because it’s faster to code on Bricks Builder.

ON THIS PAGE