Writing Modular CSS – BEM Approch

BEM = Block Element Modifier


.block { /* styles */ }
.block__element { /* styles */ }
.block--modifier { /* styles */ }


.BLOCK
a top-level abstraction of a new component
Block in BEM is a component

an Example : A form is an components, so In BEM, blocks are written as class names.
.btn {}

The reasons we use .form class instead of form element is because classes allow for infinite reusability.

A god example are ;

If styled a button with a .button class instead, you can choose whether to use the .button class on any <button> elements. Then, if you need a different background color, all you do is to change to a new class, say .button--green, and you’re good to go!
.button--green in BEM is a modifiers.

.ELEMENT
Child items of a BLOCK
.btn__cart {}

A part of a block that has no standalone meaning and is semantically tied to its block.

.MODIFIERS
all elements that can theme or style that particular component without inflicting changes on a completely unrelated module
.btn--pink {} .btn--small {}

Modifiers change the appearance of a said block.
In traditional BEM, when you use a modifier, you add the block and the modifier into your HTML so you don’t rewrite your .button styles in the new .button--green.

An Example should be :

Primary
Secondary


and the css :


.button {
border-radius: 2em;
background-color: red;
}

.button–green {
background-color: green;
}
asaas