HTML CSS - BEM Methodology

Implementing BEM methodology for CSS

The BEM (Block Element Modifier) methodology is a popular naming convention for writing CSS. It aims to create reusable components and code sharing in front-end development. This tutorial covers the basics of implementing the BEM methodology in your CSS projects.

What is BEM?

BEM is a methodology that helps you to create reusable components and code sharing in front-end development. The BEM naming convention follows a strict pattern of Block__Element--Modifier:

• Block: A standalone entity that is meaningful on its own (e.g., .button, .container).
• Element: A part of a block that has no standalone meaning and is semantically tied to its block (e.g., .button__icon, .container__header).
• Modifier: A flag on a block or element. It changes the appearance or behavior (e.g., .button--primary, .container__header--large).

BEM Naming Convention

The BEM naming convention uses double underscores and double hyphens to separate blocks, elements, and modifiers. Here is an example:

<!-- HTML -->
<div class="swf-lsn-block">
    <div class="block__element block__element--modifier">Content</div>
</div>

/* CSS */
.block {
    /* Block styles */
}

.block__element {
    /* Element styles */
}

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

In this example, .block is the block, .block__element is an element within that block, and .block__element--modifier is a modifier that changes the appearance of the element.

Example of BEM Implementation

Let's see a more detailed example of how to implement BEM in a real-world scenario. Consider a simple card component:

<!-- HTML -->
<div class="swf-lsn-card">
    <div class="card__header">Card Header</div>
    <div class="card__body">
        <p class="card__text">This is some text inside a card body.</p>
        <button class="card__button card__button--primary">Click Me</button>
    </div>
</div>

/* CSS */
.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
}

.card__header {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.card__body {
    font-size: 1em;
}

.card__text {
    margin-bottom: 10px;
}

.card__button {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.card__button--primary {
    background-color: blue;
    color: white;
}
            

In this example:

• .card is the block.
• .card__header, .card__body, and .card__text are elements.
• .card__button--primary is a modifier applied to .card__button to create a primary button style.

Advantages of Using BEM

Using BEM methodology offers several advantages:

• Readability: The naming convention is clear and descriptive, making the CSS easier to read and understand.
• Maintainability: It helps in organizing the CSS code in a modular way, making it easier to maintain and scale.
• Reusability: Components are designed to be reusable, promoting DRY (Don't Repeat Yourself) principles.
• Scalability: BEM's structure makes it easier to manage large projects and collaborate with other developers.

Best Practices for BEM

Here are some best practices for implementing BEM:

• Use meaningful names that describe the purpose of the block, element, or modifier.
• Keep the class names as short and concise as possible while maintaining clarity.
• Avoid nesting blocks within other blocks. Instead, create separate blocks or use elements and modifiers.
• Maintain consistency in your naming convention throughout the project.

Summary

In this tutorial, you learned about the BEM methodology for writing CSS. You explored the BEM naming convention, saw examples of implementing BEM in real-world scenarios, and learned about the advantages and best practices of using BEM. Implementing BEM can help you create more modular, maintainable, and scalable CSS code.