What is BEM? ??

The BEM (Block, Element, Modifier) model is a naming convention for writing clean and modular CSS code. It helps in organizing and structuring CSS classes in a way that promotes reusability and maintainability. Here's an example of using the BEM model for a product card layout using SCSS:

<div class="product-card"
  <div class="product-card__image">
    <img src="product-image.jpg" alt="Product Image">
  </div>
  <h3 class="product-card__title">Product Name</h3>
  <p class="product-card__description">Product Description</p>
  <button class="product-card__button product-card__button--highlighted">Add to Cart</button>
</div>        

CSS

.product-card 
  // Styles for the product card block

  &__image {
    // Styles for the product card's image element
  }

  &__title {
    // Styles for the product card's title element
  }

  &__description {
    // Styles for the product card's description element
  }

  &__button {
    // Styles for the product card's button element

    &--highlighted {
      // Modifier class for a highlighted button
    }
  }
}        

In the above example, we have a product card layout with different elements such as an image, title, description, and a button. Each element has its own class name based on the BEM convention.

• The product-card class represents the block.
• The product-card__image, product-card__title, product-card__description, and product-card__button classes represent the elements within the block.
• The product-card__button--highlighted class represents a modifier for the button element, indicating a highlighted style.

By following the BEM model, you can easily identify and style specific elements within the product card layout while maintaining a clear structure and avoiding naming conflicts.