6. BEM

Naming conventions are a system to achieve naming elements in a more readable and cohesive way. In CSS we have different structures available, but all of them are based on classes that let you write styles in a more modular, reusable, maintainable, fast, and efficient way. In the CSS ecosystem we can find some strategies such as OOCSS, SMACSS, and BEM, the latter being the most popular and quite understandable thanks to its simplicity.

The BEM methodology (Block Element Modifier) builds names following 3 parts.

  • Block: It is an independent and meaningful entity in the user interface. It is represented as a unique CSS class and is not affected by its context.
<header class="header"></header>
  • Element: It is an indivisible part of the block and has no meaning outside of it. It is represented as a CSS class that is nested inside the block's class.
<header class="header">
  <nav class="nav">
    <ul class="nav__list">
      <li>
        <a href="#" class="nav__link">Home</a>
      </li>
    </ul>
  </nav>
</header>
  • Modifier: It is a variation or state of the block or element. It is used to change the appearance or behavior of the block or element. It is represented as an additional CSS class that is added to the block's or element's class.
<a href="#" class="link link--verde">See details</a>

We could summarize its use in 5 rules:

  1. Everything is named with classes.
  2. All our sections/components are called blocks.
  3. The interior of our blocks are called elements.
  4. A Block and an Element are separated by 2 underscores: blog__articulo.
  5. An Element and its Modifier are separated by 2 hyphens: boton--rojo.

BEM helps avoid excessive specificity and the style cascade, which makes it easier to maintain and reuse styles in larger and more complex CSS projects.

Let's look at another example creating a hypothetical shopping cart in a sidebar.

<html>
    <body>
        <aside class="aside">
            <!-- Cart Block -->
            <section class="cesta">
                <!-- Item Block -->
                <div class="item">
                    <!-- Item Name Element -->
                    <div class="item__nombre">
                        Book
                    </div>
                    <!-- End Item Name Element -->
                    <!-- Item Price Element -->
                    <div class="item__precio">
                        30 €
                    </div>
                    <!-- End Item Price Element -->
                </div>
                <!-- End Item Block -->
                <!-- Item Block -->
                <div class="item">
                    <!-- Item Name Element -->
                    <div class="item__nombre">
                        Pencil
                    </div>
                    <!-- End Item Name Element -->
                    <!-- Item Price Element -->
                    <div class="item__precio">
                        2 €
                    </div>
                    <!-- End Item Price Element -->
                </div>
                <!-- End Item Block -->
            </section>
            <!-- End Cart Block -->
        </aside>
        <main></main>
    </body>
</html>

Now I want to add a Buy button.

<button class="boton">Buy</button>

I had already built a generic button for my whole site, but in this case I need a variant that disables the button when the cart is empty. I add a modifier separated by 2 hyphens.

<button class="boton boton--desactivado">Buy</button>

Our Modifier adds or overrides the classes I need. A possible CSS for the example.

.boton {
    border-radius: 2rem;
    background: white;
    color: black;
    border: 1px solid black;
}

.boton--desactivado {
    opacity: .5;
}

If any doubt remains, you can go to the official BEM site to see more examples.

Activity 1

Create a header. It must contain:

  • A logo.
  • A navigation bar with hyperlinks to move around the page.
  • A search form.
Activity 2

Create a structure for a simple comment system.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Desafíos de programación atemporales y multiparadigmáticos

Desafíos de programación atemporales y multiparadigmáticos

Te encuentras ante un librillo de actividades, divididas en 2 niveles de dificultad. Te enfrentarás a los casos más comunes que te puedes encontrar en pruebas técnicas o aprender conceptos elementales de programación.

Buy the book

Will you buy me a coffee?

This is how I keep writing without ads or paywalls.

Ko-fi donationsSure, it's on me!

Comments

There are no comments yet.