BEM with drupal

What is BEM? A Complete Guide to Using It in Drupal

on

When building complex Drupal websites, keeping your front-end code clean, maintainable, and scalable is just as important as the backend architecture. One powerful methodology that helps achieve this is BEM — short for Block, Element, Modifier.

In this complete guide, we’ll cover what BEM is, why it’s essential for Drupal development, and how you can use it effectively in your Drupal projects to create websites that are easier to maintain, faster to scale, and more consistent across your team.

1. Understanding BEM

BEM is a front-end naming convention that makes CSS and HTML code more readable and maintainable. It was developed by Yandex to solve common problems with CSS such as naming conflicts, poor reusability, and lack of scalability.

The methodology divides UI components into three categories:

  • Block – A standalone, reusable component that represents a meaningful piece of content or functionality.
    Example: header, menu, form.
  • Element – A part of a block that performs a specific function and is dependent on the block.
    Example: header__logo, menu__item, form__input.
  • Modifier – A variation of a block or element that changes its appearance or behavior.
    Example: button--primary, menu__item--active.

BEM Syntax:

.block {} 
.block__element {} 
.block--modifier {}

2. Why BEM Matters in Drupal Projects

Drupal is known for its powerful modular architecture, but without a structured approach to front-end code, stylesheets can become tangled and hard to manage. BEM pairs perfectly with Drupal because:

  • Component-Based Thinking – Drupal themes and templates can be broken into blocks (in the BEM sense), making them modular and reusable.
  • Predictable Naming – Developers instantly know the relationship between HTML and CSS by looking at class names.
  • Scalability – Large Drupal sites often require frequent design changes; BEM reduces the risk of breaking styles.
  • Cross-Team Collaboration – Multiple developers can work on the same Drupal theme without overwriting each other’s CSS.

3. The Benefits of Using BEM in Drupal

  1. Improved Maintainability
    By isolating blocks and elements, you reduce CSS conflicts and make code easier to update.
  2. Better Reusability
    Drupal components like view templates, field formatters, and custom blocks can share the same BEM-based styles across different site sections.
  3. Enhanced Readability
    New developers joining a Drupal project can quickly understand how elements are structured and styled.
  4. Consistency Across Projects
    Using BEM in your Drupal theme ensures that all components follow a uniform naming convention.

4. How to Implement BEM in a Drupal Theme

Step 1: Plan Your Components

Start by breaking your design into logical blocks. For example:

  • Header
  • Navigation
  • Hero section
  • Content cards
  • Footer

Each of these will be your main BEM blocks.

Step 2: Use Drupal’s Twig Templates

Drupal 8+ uses Twig for theming. You can apply BEM classes directly in template files:

twig
<div class="header">
  <div class="header__logo">
    <img src="{{ logo_path }}" alt="Site Logo">
  </div>

  <nav class="header__navigation">
    <ul class="menu">
      {% for item in menu_items %}
        <li class="menu__item">{{ item.title }}</li>
      {% endfor %}
    </ul>
  </nav>
</div>

Step 3: Create Corresponding CSS

css
.header {
  background-color: #f5f5f5;
}

.header__logo {
  max-width: 150px;
}

.menu__item {
  display: inline-block;
  padding: 10px;
}

.menu__item--active {
  font-weight: bold;
}

Step 4: Use Modifiers for Variations

For example, if you have a “dark” header on certain pages:

css
.header--dark {
  background-color: #222;
  color: white;
}

5. Best Practices for Using BEM in Drupal

  • Keep Block Names Semantic – Use names that describe functionality, not presentation (.button instead of .blue-button).
  • Avoid Nesting in CSS – BEM works best when selectors stay flat, improving performance and reducing complexity.
  • Match Twig Class Names to CSS – Ensure that the same BEM naming appears in your HTML output.
  • Leverage Drupal’s Class Additions – Use #attributes.addClass() in Twig to dynamically add modifiers based on conditions.

Example:

twig
<div{{ attributes.addClass('card', is_featured ? 'card--featured' : '') }}>
  <h3 class="card__title">{{ title }}</h3>
  <p class="card__description">{{ description }}</p>
</div>

6. Common Mistakes to Avoid

  1. Overcomplicating Class Names
    Keep them concise. Long, overly descriptive names can be hard to read.
  2. Mixing Presentation with Naming
    Don’t tie CSS class names to specific colors, fonts, or layouts.
  3. Ignoring Drupal’s Output Structure
    Understand Drupal’s HTML structure before adding BEM classes to avoid conflicts.

7. BEM in Drupal’s Component-Based Workflows

If you’re using modern Drupal development workflows such as Pattern Lab, Storybook, or Emulsify, BEM integrates perfectly. These tools encourage building reusable components, and BEM provides a universal language for naming and styling them.

8. SEO Benefits of Using BEM in Drupal

While BEM itself is not a ranking factor, its indirect SEO benefits are significant:

  • Cleaner Code – Search engines can parse and index pages more efficiently.
  • Consistent Layouts – Enhances mobile responsiveness, improving Core Web Vitals.
  • Faster Page Speeds – Well-structured CSS reduces unnecessary styles.

9. Why Hire a Drupal Agency for BEM Implementation

As a specialized Drupal web agency, we not only understand Drupal’s back-end architecture but also know how to create clean, scalable, and future-proof front-end code using methodologies like BEM.

Whether you’re building a new site or redesigning an existing one, we can:

  • Audit your current theme for CSS issues
  • Implement BEM across all templates
  • Integrate component libraries for rapid development
  • Ensure cross-browser and cross-device consistency

Conclusion

BEM is more than just a naming convention — it’s a way of thinking about your front-end architecture that perfectly complements Drupal’s modular nature. By using BEM, your Drupal website becomes easier to maintain, more scalable, and better optimized for collaboration.

If you’re looking for a Drupal partner who can implement BEM and build a robust, future-proof website, our team is here to help. Let’s make your Drupal project cleaner, faster, and easier to manage.