What is BEM ?

As a front-end developer,have you ever heard of BEM?
What comes to mind when you first heard it? Some kind of complicated principle? No isn't.
In this write-up, I will be taking you through the basics ofBEM, which stands for Block, Element, Modifier, is a methodology for naming and organizing CSS classes that have gained popularity among front-end developers in recent years. The goal of BEM is to create a more structured, maintainable, and scalable codebase that is easier to understand and work with.

At its core, BEM is a simple concept. It is a naming convention that describes the relationship between different parts of an HTML element. The three parts of the BEM naming convention are as follows:

Block: The block is the highest level of the BEM hierarchy. It represents a self-contained unit of functionality or content on a web page. Examples of blocks could be a header, a menu, or a footer. Blocks are named using a single word or phrase that describes their function.

Element: element is part of a block that performs a specific function or has a specific role. Examples of elements could be a button, a title, or a logo. Elements are named using the block name, followed by two underscores (__), and then the element name.

Modifier: modifier is a variation of a block or element. It is used to change the appearance or behavior of a block or element without changing its basic structure. Examples of modifiers could be a disabled button or a highlighted menu item. Modifiers are named using the block or element name, followed by two hyphens (--), and then the modifier name.
Here is an example of how BEM can be applied to an HTML element:

<div class="block">
  <h2 class="block__element">Title</h2>
  <button class="block__element--modifier">Button</button>
</div>

<div class="block">
  <h2 class="block__title">Title</h2>
  <ul class="block__list">
    <li class="block__list-item">Item 1</li>
    <li class="block__list-item block__list-item--featured">Item 2</li>
    <li class="block__list-item block__list-item--highlighted">Item 3</li>
  </ul>
</div>

    <div class="detail">  
        <span class="detail_frame_3 frame--3">
                <h5>{{post._embedded["author"][0].name}} </h5>
                <small>{{ post.date.slice(0,10) }}</small>
        </span>

        <div class="detail_frame-9 frame-9">
         <h5>{{ post.title.rendered }} </h5>
         <div class="detail_frame-9_paragraph paragraph ">
            <div>
                {{ selectedParagraph }}
            </div>
         </div>
        </div>

    <div class="detail_image">
      <img :src="post._embedded['wp:featuredmedia'][0]?.source_url" >
   </div>


    <div class="detail_paragraph paragraph " v-for="(paragraph, index) in paragraphs" :key="index" > 
      {{ paragraph}}
        </div>



    </div>

In this example, "block" is the highest-level container, "element" is a part of the "block," and "modifier" is a variation of the "element." By using this naming convention, it becomes easy to understand the structure of the HTML element and to make changes to the CSS styles that are applied to it.

One of the key benefits of using BEM is that it helps to create more maintainable and scalable CSS code. By following a consistent naming convention, developers can more easily understand how different parts of the code relate to each other and avoid creating duplicate styles or conflicting selectors. Additionally, the structure of BEM makes it easier to organize and manage large CSS codebases, making it ideal for complex projects.

In conclusion, BEM is a powerful methodology that can help frontend developers create more maintainable, scalable, and understandable CSS code. By following a consistent naming convention, developers can create code that is easier to read, manage, and maintain over time, making it a valuable addition to any frontend development workflow.