Cristina

Activity 20: Research BEM - Block, Element, Modifier - Architercture

Cristina Coronel's photo
Cristina Coronel
·

2 min read

Table of contents

What is BEM?:

  • BEM (Block Element Modifier) is a widely adopted naming convention in CSS for organizing code in a modular, reusable, and scalable way. It is particularly useful for large-scale projects as it helps in maintaining consistency and avoiding naming conflicts. BEM is structured as follows:

    • It stands for:

      • Block: A standalone entity like a button or menu (.button).

      • Element: A part of the block that has a specific function (.button__icon).

      • Modifier: A variation of the block or element (.button--primary).

Advantages of BEM:

  • Improves code readability.

    • Encourages modularity, making it easy to manage large projects.

    • Helps avoid CSS conflicts.

Practice:

  • Create an HTML structure using BEM naming conventions and write CSS to style it.

    index.html contents:

    • Code:

        <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>

  <body>

  <div class="card">
    <div class="card__content">
      <h3 class="card__title">EcoCard</h3>
      <p class="card__text">Biodegradable</p>
    </div>
    <button class="card__button">Button</button>
    <button class="card__button card__button--primary">
      Primary Button
    </button>
  </div>
  </body>
  </html>

      styles.css contents:

      Code:

        .card {
    background-color: rgb(45, 97, 66);
    border-radius: 8px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 100px auto;
    box-shadow: 0px 2px 5px 2px #aaaaaa;
    padding: 1rem;
  }

  .card__content {
    padding: 16px;
  }

  .card__title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .card__text {
    font-size: 20px;
    color: gray;
    text-align: center;
  }

  .card__button {
    background-color: white;
    color: black;
    border-radius: 4px;
    padding: 10px;
    text-transform: uppercase;
    margin: 10px;
    cursor: pointer;
    box-shadow: 0px 2px 5px 2px #aaaaaa;
    font-weight: bold;
  }

  .card__button--primary {
    background-color: blue;
    margin: 10px;
    cursor: pointer;
  }

      OUTPUT:

      https://github.com/mischiii22/BEM.git