Joshua Nato's team blog

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

Joshua Nato's photo
Joshua Nato
·

7 min read

BEM (Block Element Modifier) is a methodology for naming CSS classes in a way that promotes modularity, reusability, and clarity in web development. Here's a breakdown of the key concepts, advantages, and a practical example using BEM naming conventions.

Key Concepts of BEM

  1. Block:

    • A Block represents a standalone component of the user interface that is meaningful on its own. For example, a button, a header, or a card can be considered a block. The class name is written in lowercase and uses a single dot to indicate a class (e.g., .button).

  2. Element:

    • An Element is a part of a block that performs a specific function or role within the block. Elements are always tied to their respective blocks and cannot exist independently. The naming convention uses a double underscore to connect the block name and element name (e.g., .button__icon).

  3. Modifier:

    • A Modifier is a flag on a block or element that changes its appearance or behavior. Modifiers can denote variations in style (such as colors, sizes, or states) and are written using a double hyphen (e.g., .button--primary).

Advantages of BEM

  • Improves Code Readability: The BEM naming convention provides a clear structure to CSS class names, making it easier for developers to understand the relationships between different components in the UI. It reduces ambiguity about what each class represents.

  • Encourages Modularity: By organizing code into blocks, elements, and modifiers, BEM promotes a modular approach to CSS development. This modularity makes it easier to maintain and scale large projects since components can be reused across different parts of an application without duplicating styles.

  • Helps Avoid CSS Conflicts: The specificity of BEM class names helps to avoid naming collisions. Since BEM encourages unique and descriptive names, it minimizes the likelihood of styles unintentionally affecting one another, which is a common issue in traditional CSS practices.

Practical Example Using BEM

HTML Structure:

Imagine you are creating a button component for a web application. Using BEM naming conventions, the HTML structure might look like this:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1 class="header__title">My Website</h1>
    <nav class="header__nav">
      <ul class="header__list">
        <li class="header__item"><a href="#" class="header__link">Home</a></li>
        <li class="header__item"><a href="#" class="header__link">About</a></li>
        <li class="header__item"><a href="#" class="header__link">Services</a></li>
        <li class="header__item"><a href="#" class="header__link">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="section">
      <h2 class="section__title">Welcome to BEM Sample Page </h2>
      <p class="section__text">In the realm of web development, organization and maintainability are crucial for building scalable and efficient applications. One methodology that has gained significant traction in recent years is the Block Element Modifier (BEM) naming convention. This essay discusses a simple project aimed at demonstrating the use of BEM in HTML and CSS, highlighting its benefits and practical applications..</p>
      <button class="button">Click Me</button>
      <button class="button button--cancel">Cancel</button>
    </section>
  </main>


      <p class="card__description">This is a brief description of the card content. It provides an overview of what the card is about.</p>
      <a href="#" class="card__button card__button--primary">Read More</a>
      <a href="#" class="card__button card__button--secondary">Share</a>
    </div>
  </div>

<footer class="footer">
    <p class="footer__copyright">&copy; 2024 Simpe Web Page BEM </p>
  </footer>


</body>
</html>

Document Type and Head Section

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).

  • <html>: This tag encloses the entire HTML document.

  • <head>: Contains meta-information about the document, such as its title and linked stylesheets.

  • <title>: Sets the title of the webpage, which appears in the browser tab.

  • <link rel="stylesheet" href="style.css">: Links an external CSS stylesheet (style.css) for styling the page.

2. Header Section

htmlCopy code<body>
  <header class="header">
    <h1 class="header__title">My Website</h1>
    <nav class="header__nav">
      <ul class="header__list">
        <li class="header__item"><a href="#" class="header__link">Home</a></li>
        <li class="header__item"><a href="#" class="header__link">About</a></li>
        <li class="header__item"><a href="#" class="header__link">Services</a></li>
        <li class="header__item"><a href="#" class="header__link">Contact</a></li>
      </ul>
    </nav>
  </header>

  • <header class="header">: Defines the header section of the webpage, styled using the BEM convention.

  • <h1 class="header__title">My Website</h1>: A heading element representing the main title of the website.

  • <nav class="header__nav">: A navigation section containing links to different pages.

  • <ul class="header__list">: An unordered list representing the navigation items.

  • <li class="header__item">: Each list item corresponds to a navigation link.

  • <a href="#" class="header__link">: The anchor elements serve as navigation links, styled according to the BEM convention.

3. Main Content Section

htmlCopy code<main class="main">
  <section class="section">
    <h2 class="section__title">Welcome to BEM Sample Page </h2>
    <p class="section__text">In the realm of web development, organization and maintainability are crucial for building scalable and efficient applications. One methodology that has gained significant traction in recent years is the Block Element Modifier (BEM) naming convention. This essay discusses a simple project aimed at demonstrating the use of BEM in HTML and CSS, highlighting its benefits and practical applications.</p>
    <button class="button">Click Me</button>
    <button class="button button--cancel">Cancel</button>
  </section>
</main>

  • <main class="main">: This element denotes the main content area of the page.

  • <section class="section">: A section representing a distinct part of the content.

  • <h2 class="section__title">Welcome to BEM Sample Page</h2>: A secondary heading within the section.

  • <p class="section__text">: A paragraph that provides information about the BEM methodology.

  • <button class="button">Click Me</button>: A button styled with the BEM convention.

  • <button class="button button--cancel">Cancel</button>: Another button that includes a modifier (button--cancel) to indicate its specific function or style.

4. Card Description (Incomplete)

htmlCopy code<p class="card__description">This is a brief description of the card content. It provides an overview of what the card is about.</p>
<a href="#" class="card__button card__button--primary">Read More</a>
<a href="#" class="card__button card__button--secondary">Share</a>

  • This section seems to be incomplete, lacking a proper parent container for the card components. However, it demonstrates how to use BEM for card elements.

  • <p class="card__description">: A paragraph describing the card content.

  • <a href="#" class="card__button card__button--primary">Read More</a>: A primary button styled with BEM to read more about the card.

  • <a href="#" class="card__button card__button--secondary">Share</a>: A secondary button for sharing the card.

htmlCopy code<footer class="footer">
  <p class="footer__copyright">&copy; 2024 Simple Web Page BEM</p>
</footer>

  • <footer class="footer">: Defines the footer section of the webpage.

  • <p class="footer__copyright">: A paragraph containing copyright information.

CSS Styling:

The corresponding CSS for the BEM structure might include:

.header {
  background-color: #f0f0f0;
  padding: 20px;
}

.header__title {
  font-size: 24px;
  font-weight: bold;
}

.header__nav {
  margin-top: 10px;
}

.header__list {
  list-style: none;
  padding: 0;
}

.header__item {
  display: inline-block;
  margin-right: 10px;
}

.header__link {
  text-decoration: none;
  color: #333;
}

/* ... more CSS styles for other elements ... */

  • .header

    • Purpose: This class defines the main block for the header of the webpage.

    • Styles:

      • background-color: #f0f0f0;: Sets a light gray background color for the header.

      • padding: 20px;: Adds padding of 20 pixels around the content within the header, creating space between the content and the edges.

2. .header__title

  • Purpose: This class styles the title within the header block.

  • Styles:

    • font-size: 24px;: Sets the font size of the title to 24 pixels, making it prominent.

    • font-weight: bold;: Makes the title bold, enhancing its visibility.

3. .header__nav

  • Purpose: This class can be used to style a navigation container within the header.

  • Styles:

    • margin-top: 10px;: Adds a top margin of 10 pixels, providing space between the title and the navigation elements below.

4. .header__list

  • Purpose: This class styles a list that is likely used for navigation items in the header.

  • Styles:

    • list-style: none;: Removes the default bullet points from the list items.

    • padding: 0;: Resets any default padding on the list, allowing for more precise control over spacing.

5. .header__item

  • Purpose: This class styles individual list items within the header navigation list.

  • Styles:

    • display: inline-block;: Changes the display property to inline-block, allowing list items to sit next to each other horizontally instead of stacking vertically.

    • margin-right: 10px;: Adds a right margin of 10 pixels between each navigation item, creating space for better visual separation.

  • Purpose: This class styles the links within the header navigation items.

  • Styles:

    • text-decoration: none;: Removes the default underline from the links, giving them a cleaner look.

    • color: #333;: Sets the link color to a dark gray, ensuring good contrast against the background and making it readable.

BEM is a powerful methodology that enhances CSS organization, making it more maintainable, understandable, and less prone to conflicts. By breaking down UI components into blocks, elements, and modifiers, developers can create scalable and modular codebases that are easier to work with, especially in larger projects or teams.