Loquero, Rodney I.'s Blog
BEM - Block, Element, Modifier - Architecture

BEM - Block, Element, Modifier - Architecture

Loquero, Rodney I.'s photo
Loquero, Rodney I.
·

2 min read

For this documentation, I will show you how to use BEM Architecture using HTML and CSS. I will provide code snippets to show how it is done.

But first what is BEM Architecture actually?

BEM (Block, Element, Modifier) is a CSS naming convention designed to make your HTML and CSS more understandable, scalable, and maintainable. Here's a breakdown:

  1. Block: The main component or a standalone entity (e.g., a navigation bar, button).

    • Example: .header, .button

  2. Element: A part of the block that has no standalone meaning and is tied to the block (e.g., a menu item, a button label).

    • Naming: Block name followed by two underscores __ and the element name.

    • Example: .header__nav, .button__label

  3. Modifier: A variation of the block or element, representing different states or versions (e.g., active, disabled).

    • Naming: Block or element name followed by two dashes -- and the modifier name.

    • Example: .menu--active, .button__label--big

Now that we have understanding about the Architechture, here’s the example I did.

For the code snippets of my HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bemIndex.css">
    <title>BEM Architecture</title>
</head>
<body>
    <div class="header">
        <nav class="header__nav">
            <ul class="header__nav-list">
                <li class="header__nav-item"><a href="#" class="header__nav-link">Home</a></li>
                <li class="header__nav-item"><a href="#" class="header__nav-link">About</a></li>
                <li class="header__nav-item"><a href="#" class="header__nav-link">Services</a></li>
                <li class="header__nav-item"><a href="#" class="header__nav-link">Contact</a></li>
                <li class="header__nav-item"><a href="#" class="header__nav-link4">YawYaw?</a></li>
            </ul>
        </nav>
    </div>
    <img src="images/froyo1.png" alt="" style="height: 400px;">
    <br>
    <br>
    <div class="_overview">
        <button type="button" class="btnCreate">Create Your Own</button>
        <p class="__description">Welcome to our world of Tasty Frozen Yogurt, where creamy indulgence meets a refreshing, tangy twist! <br>Enjoy a delightful treat crafted from cultured milk,<br> paired perfectly with your choice of fruits, nuts,<br> and syrups for a deliciously satisfying experience.</p>
    </div>
    </body>
</html>

And here’s the code snippets for the CSS File:



.header{
    display: flex;
    background-color: #a9d42d;
    border-radius: 5px;
}

@font-face {
    font-family:'vag';
    src: url(fonts/Vag\ Bold.ttf);
}

.header .header__nav .header__nav-list{ 
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    align-items: center;
} 
.header__nav-item a{
    text-decoration: none;
    margin: 10px;
    font-family: 'vag';
    color: #ffffff;
    font-size: 25px;
}

.header__nav-item .header__nav-link4{
    font-size: 40px;
    margin-left: 650px;
}

.btnCreate{
    background-color: #a9d42d;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-family: vag;
    font-size: 15px;
    margin-left: 45vh;
}

.__overview{
    display: flex;
}

.__description{
    font-family: 'vag';
    margin-left: 700px;
    margin-top: -300px;
    font-size: 25px;
    color:#a9d42d;
}

And lastly this is the final output of what I designed using the method of BEM Architecture.

GitHub Link: https://github.com/rodney-lqr/BasicHTML

CSS