bLOCK eLEMENT mODIFIER BEM

BEM is about how we structure our html and how we name our CSS / sass classes.

the idea is to divide our user interface into independent blocks. This allows us to reuse existing code without copying and pasting.

Block -  are represented by class attribute.

 - the block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big).

- The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block

- You also shouldn't use CSS tag or ID selectors when using BEM.

When its about Nesting Blocks

• Blocks can be nested in each other.
• You can have any number of nesting levels.

Element 

• The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).
• The structure of an element's full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).
• If a section of code might be reused and it doesn't depend on other page components being implemented, you should create a block.
• If the section of code can't be used separately without the parent entity (the block), an element is usually created.

<div class="block">
   ...
   <span class="block__elem"></span>
 </div>

Modifier

• The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
• block-name_modifier-name
• block-name__element-name_modifier-name

<div class="block block--mod">...</div>
 <div class="block block--size-big
  block--shadow-yes">...</div>

Mix

<!-- `header` block --> <header class="header"> <!-- Added the `header__button` class to the `button` block --> <button class="button header__button">...</button> </header> <!-- `form` block --> <form class="form" > <button class="button">...</button> </form>

.button { font-family: Arial, sans-serif; border: 1px solid black; }

.header__button { margin: 30px; position: relative; }

HTML implementation:

<article class="article text"></article>

<footer class="footer">
    <div class="copyright text"></div>
</footer>

CSS implementation:

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}