BEM Pattern 🗂

BEM pattern is a naming convention that allows you to be more accurate and organized when using CSS classes.

It is quite simple to apply but the benefits are countless.

Block

The block is an independent entity of the DOM. An HTML element is called a block when its CSS logic is not tied to other elements.

For instance: ".button".

Element

The element is the child of a block and is inevitably linked to it with its own style.

For instance: ".button__icon".

Modifier

The modifier is a flag placed through the string "--" on the block or element to change its behavior or state.

For instance: ".button--outline".

Why use BEM?

It is well known that being organized and using correct guidelines benefits productivity and speed of execution.

Using the BEM pattern with Oxygen Builder will also improve the search through hints, avoiding creating redundant classes.

BEM Tutorials

You can of course use any CSS technique you want but we believe that the BEM pattern is the most effective technique for Oxygen Builder. 

If you want to deepen the subject with practical examples here are 2 videos that could be for you!