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.
Modifier
- The modifier name describes its appearance ("What size?" or "Which theme?" and so on —
size_sortheme_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 asdirections_left-top). block-name_modifier-nameblock-name__element-name_modifier-name
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;
}