Bem It! Introduction to Bem Detail
INTRO
BEM-Block Element Modifier is a powerful and simple naming convention that helps you create reusable components. It makes your front-end code easier to read, easier to work with, more robust and easier to scale.
BLOCK
A standalone entity that’s meaningful on its own. Any DOM node can be a block if it accepts a class name.
Example:
.block
ELEMENT
Part of a block (usually child element) that is semantically tied to the block.
Element classes contain the block and element name separated by two underscores.
Example:
.block_element
MODIFIER
Flags on blocks or elements used to change appearance, behaviour or state. Modifier classes contain the block or element class they are applied to separated by two hyphens.
Example:
.block_ element–modifier
Example CSS:
***
.accordion{
list-style: none;
margin: 0;
padding: 0;
}
.accordion_ _row {
padding: 20px;
border-bottom: 1px solid #cccccc;
}
.accordion_ _heading {
color: #fc4c86;
}
.accordion_ _content {
max-height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.accordion_ _content-- expanded {
max-height: 100vh;
}
Example HTML:
*** <ul class= "accordion "> <li class="accordion_ _row"> <button class="accordion_ _heading"> How to place an order? </button> <div class="accordion_ _content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </li> <li class="accordion_ _row"> <button class="accordion_ _heading"> How to track my order? </button> <div class="accordion_ content accordion _content--expanded "> <p> Donec nec orci non nunc dictum sodales. Pellentesque gravida urna accumsan congue fringilla. </p> </div> </li> </ul>
FINAL THOUGHTS
BEM is easy to use for modular and reusable code. It’s flexible, configurable and easily combined with other methodologies. The class names can sometimes get a little long but that’s a small price for good code readability.
