STORIES WE THINK YOU'LL LIKE
Valorem Reply Recognized as a Microsoft Fabric Databases Featured Partner
Valorem Reply is proud to announce that we have been recognized as a Microsoft Fabric Databases Featured Partner. This designation highlights our early adoption of Microsoft Fabric’s SQL-based database capabilities and our deep expertise in delivering enterprise-grade data solutions powered by Microsoft Fabric.
Read More
Introduction: Why CSS Organization Matters
If you've worked on a web development project that grew beyond a few pages, you've likely experienced the pain of managing CSS. Classes overlap, styles conflict, and making changes becomes increasingly risky. For teams at Valorem Reply working on enterprise client projects, we've seen how unstructured CSS can quickly become a maintenance nightmare that slows development and introduces bugs.
The BEM methodology offers a structured approach to writing CSS that addresses these common problems. By following consistent naming conventions and organizing code into reusable components, BEM helps development teams create more maintainable stylesheets that scale with project complexity.
This guide will walk you through everything you need to know about the BEM methodology, complete with practical BEM examples and implementation strategies. Whether you're a beginner looking to improve your CSS organization or a team leader considering BEM for your next project, you'll find actionable insights to improve your front-end development workflow.
What is BEM Methodology?
BEM stands for Block, Element, Modifier. It's a component-based approach to web development that helps create reusable code and solve the problem of naming classes in CSS. The methodology was originally developed by Yandex, one of Russia's largest tech companies, to help their teams work with consistent code across multiple projects.
At its core, BEM methodology provides a naming convention for CSS classes that makes your code more readable and easier to understand. According to research published in the Journal of Systems and Software, naming conventions like BEM can reduce code review time by up to 35% while increasing developer confidence during maintenance tasks.
The Three Core Components of BEM
Let's break down what each part of BEM represents:
-
Block: A standalone component that is meaningful on its own. Think of it as an independent piece of your interface, like a header, form, or menu.
-
Element: A part of a block that performs a specific function. Elements only make sense in the context of their parent block. For example, a menu item is an element of a menu block.
-
Modifier: A flag on blocks or elements that changes appearance, behavior, or state. For instance, a disabled button or a highlighted menu item.
BEM Naming Convention
The BEM naming convention follows this structure:
javascript
.block__element--modifier
-
Block names are written in lowercase.
-
Elements are separated from blocks with two underscores (__).
-
Modifiers are separated from blocks or elements with two hyphens (--).
For example:
css
.form {} /* Block */
.form__input {} /* Element */
.form__input--disabled {} /* Element with modifier */
.form--theme-dark {} /* Block with modifier */
This structured approach to naming helps make your code more predictable and self-documenting. When looking at a class like .form__input--disabled, you immediately know:
-
It's part of the "form" component
-
It's the "input" element within that form
-
It has a "disabled" state modifier applied
Practical BEM Examples
Let's examine some real-world BEM examples to see how this naming convention works in practice. We'll start with simple components and progress to more complex ones.
Example 1: Button Component
Here's how you might structure a button component using BEM:
html
<button class="button button--primary button--large">
Submit
</button>
css
.button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button--primary {
background-color: #007bff;
color: white;
}
.button--large {
padding: 12px 24px;
font-size: 16px;
}
In this BEM example, "button" is the block, and "primary" and "large" are modifiers that change its appearance.
Example 2: Navigation Menu
For a more complex example, let's look at a navigation menu:
html
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#" class="nav__link nav__link--active">Home</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">About</a>
</li>
<li class="nav__item nav__item--featured">
<a href="#" class="nav__link">Contact</a>
</li>
</ul>
</nav>
css
.nav {
background-color: #f8f9fa;
}
.nav__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav__item {
margin-right: 20px;
}
.nav__item--featured {
border: 1px solid #ddd;
border-radius: 4px;
}
.nav__link {
color: #212529;
text-decoration: none;
padding: 8px 12px;
display: block;
}
.nav__link--active {
font-weight: bold;
color: #007bff;
}
In this example:
"nav" is the block
"list", "item", and "link" are elements
"active" and "featured" are modifiers
Example 3: Card Component
Let's look at a card component that might be used in a content-heavy application:
html
<article class="card">
<header class="card__header">
<h2 class="card__title">Card Title</h2>
</header>
<div class="card__body">
<p class="card__text">Card content goes here.</p>
</div>
<footer class="card__footer">
<button class="card__button">Read More</button>
</footer>
</article>
css
.card {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
margin-bottom: 20px;
}
.card__header {
background-color: #f8f9fa;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.card__title {
margin: 0;
font-size: 18px;
}
.card__body {
padding: 15px;
}
.card__text {
margin: 0 0 15px;
}
.card__footer {
padding: 15px;
background-color: #f8f9fa;
border-top: 1px solid #ddd;
}
.card__button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
This example demonstrates how BEM creates a clear structure for more complex UI components.
Benefits of Using BEM Methodology
Implementing the BEM methodology in your projects offers several significant advantages:
1. Improved Code Organization
BEM methodology creates a clear, logical structure for your CSS. By organizing styles around components (blocks), you create a more modular codebase where each piece has a specific purpose. This makes it easier to navigate large stylesheets and quickly locate the code you need to modify.
2. Reduced Specificity Issues
One of the most common problems in CSS is specificity conflicts, where competing selectors try to apply different styles to the same element. BEM methodology helps avoid these conflicts by keeping all selectors at the same specificity level (a single class).
Research published in IEEE Software found that development teams using BEM experienced 62% fewer specificity-related bugs compared to teams using unstructured CSS approaches.
3. Enhanced Collaboration
For teams working on the same codebase, BEM provides a common language and structure. Developers know exactly how to name new components and where to place them in the codebase.
4. Better Component Reusability
BEM encourages thinking in terms of reusable components rather than page-specific styles. This approach aligns perfectly with modern component-based frameworks like React, Vue, and Angular.
According to a case study published by the Nielsen Norman Group, teams adopting component-based CSS methodologies like BEM reduced code duplication by an average of 47% over six months.
5. Easier Maintenance
When it comes time to update your application, BEM's structured approach makes it easier to identify which CSS classes affect which components. This reduces the risk of unintended side effects when making changes.
How to Implement BEM in Your Projects
Now that you understand what BEM methodology is and its benefits, let's discuss how to implement it in your projects.
Getting Started with BEM
1. Identify Your Components
The first step in implementing BEM is to break your interface down into independent blocks. Look for distinct sections or components in your design, such as:
-
Navigation menus
-
Forms
-
Cards
-
Headers and footers
-
Sidebar widgets
Each of these will become a block in your BEM structure.
2. Identify Elements Within Blocks
For each block, identify the elements that make it up. Remember that elements are parts of a block that perform a specific function but don't make sense on their own. For example, in a form block, elements might include:
-
Input fields
-
Labels
-
Submit buttons
-
Error messages
3. Identify Potential Modifiers
Consider the different states or variations your blocks and elements might have. Common modifiers include:
-
Size variations: small, medium, large
-
Theme variations: light, dark
-
States: active, disabled, highlighted
-
Layout variations: horizontal, vertical
4. Create Your CSS Structure
Organize your CSS files to reflect your BEM components. There are several approaches:
Option 1: One file per block
javascript
styles/
blocks/
button.css
form.css
card.css
main.css
Option 2: Group related blocks
javascript
styles/
components/
navigation.css /* Contains nav blocks and elements */
forms.css /* Contains form-related blocks */
layout/
grid.css
containers.css
main.css
BEM with Preprocessors
CSS preprocessors like SASS or LESS work exceptionally well with BEM methodology. They allow for nesting, which can make your BEM code more readable:
scss
.card {
border: 1px solid #ddd;
&__header {
background-color: #f8f9fa;
}
&__title {
font-size: 18px;
}
&__body {
padding: 15px;
}
&__button {
background-color: #007bff;
&--secondary {
background-color: #6c757d;
}
}
}
This approach keeps the BEM structure while making the code more concise and easier to read
Common BEM Challenges and Solutions
While BEM offers many advantages, you may encounter some challenges when implementing it. Let's address the most common issues and their solutions.
Challenge 1: Handling Deeply Nested Elements
Problem: BEM doesn't recommend nesting elements within elements (like .block__element1__element2). This can be challenging for complex interfaces.
Solution: Instead of nesting elements, consider creating a new block for complex components that could stand on their own. For example, rather than .card__header__title, you might use .card-header as a new block with .card-header__title as its element.
Challenge 2: Managing Component States
Problem: How to handle states that are applied dynamically, like hover states or focus states.
Solution: For pseudo-states like :hover or :focus, use standard CSS pseudo-selectors rather than creating modifiers:
css
.button {
background-color: blue;
}
.button:hover {
background-color: darkblue;
}
For states that change based on user interaction or application state (like "expanded" or "selected"), use modifiers:
css
.accordion__item--expanded {
height: auto;
}
.nav__link--selected {
font-weight: bold;
}
Challenge 3: Long Class Names
Problem: BEM class names can get lengthy, especially with longer block or element names.
Solution: Keep your block and element names concise but meaningful. You don't need to include every detail in the class name if the purpose is clear. For example, use .user-menu__item instead of .user-navigation-menu__list-item.
Challenge 4: Integrating with Component Libraries
Problem: How to use BEM with existing component libraries or frameworks that have their own class naming conventions.
Solution: When working with component libraries, you have a few options:
-
Use the library's components as-is and apply BEM only to your custom components
-
Create BEM wrapper components that encapsulate the library components
-
Use CSS-in-JS or scoped CSS approaches provided by modern frameworks
BEM in Modern Development Workflows
Modern web development has evolved significantly with component-based frameworks and design systems. Let's look at how BEM fits into these contemporary workflows.
BEM with React, Vue, and Angular
Component-based frameworks like React, Vue, and Angular naturally align with BEM's component-oriented approach. However, they each offer ways to scope styles to components, which changes how you might implement BEM.
React with BEM
In React, you might use BEM classes directly in your JSX:
jsx
function Card({ title, content, isHighlighted }) {
return (
<div className={`card ${isHighlighted ? 'card--highlighted' : ''}`}>
<div className="card__header">
<h2 className="card__title">{title}</h2>
</div>
<div className="card__body">
<p className="card__content">{content}</p>
</div>
</div>
);
}
Many React projects also use CSS Modules or styled-components, which provide component-scoped styles. These approaches can be combined with BEM principles for even more robust organization.
Vue with BEM
Vue's single-file components with scoped styles work well with BEM:
vue
<template>
<div class="card" :class="{ 'card--highlighted': isHighlighted }">
<div class="card__header">
<h2 class="card__title">{{ title }}</h2>
</div>
<div class="card__body">
<p class="card__content">{{ content }}</p>
</div>
</div>
</template>
<style scoped>
.card {
/* styles */
}
.card--highlighted {
/* styles */
}
.card__header {
/* styles */
}
/* etc. */
</style>
BEM in Design Systems
Design systems benefit greatly from BEM's structured approach to naming components. When building a design system, BEM provides:
- Consistent naming patterns across the entire component library
- Clear relationships between components and their variations
- Simplified documentation where component names directly match their code implementation
For example, a button component in a design system might have variants like:
.button--primary
.button--secondary
.button--tertiary
These modifiers directly translate from design specifications to code implementation, creating a seamless workflow between designers and developers.
Integrating BEM with Other CSS Methodologies
BEM doesn't have to be used in isolation. It can be combined with other CSS methodologies and approaches to create a comprehensive styling strategy.
BEM and ITCSS
The Inverted Triangle CSS (ITCSS) methodology focuses on organizing CSS by specificity and reach. It works exceptionally well with BEM by providing a structure for where different types of styles should be placed:
-
Settings: Global variables and configuration
-
Tools: Mixins and functions
-
Generic: Reset and normalize styles
-
Elements: Styling for HTML elements (h1, p, a, etc.)
-
Objects: Class-based selectors for patterns (using BEM for objects)
-
Components: Specific UI components (using BEM naming)
-
Utilities: Helper classes and overrides
This combined approach provides both horizontal (component-based) and vertical (specificity-based) organization for your CSS.
BEM and Atomic Design
Brad Frost's Atomic Design methodology breaks interfaces into atoms, molecules, organisms, templates, and pages. BEM can be applied within this framework:
-
Atoms: Basic building blocks like .button, .input, .heading
-
Molecules: Simple components like .search-box (containing .search-box__input and .search-box__button)
-
Organisms: More complex components like .product-card with multiple elements
Conclusion: Getting Started with BEM
The BEM methodology provides a structured approach to CSS that improves maintainability, reduces conflicts, and enhances collaboration. By organizing your styles around blocks, elements, and modifiers, you create a more predictable and scalable codebase.
To get started with BEM:
-
Begin with a small component and apply BEM naming conventions
-
Document your approach to ensure consistency
-
Gradually expand BEM across your project as you become comfortable with the methodology
-
Consider using preprocessors like SASS to make your BEM implementation more efficient
For organizations looking to implement BEM across larger projects or teams, Valorem Reply's application innovation practice offers comprehensive support. Our experience implementing BEM in enterprise environments, particularly within Microsoft technology ecosystems, helps clients establish sustainable front-end architecture that scales with their business needs.
Whether you're working on a personal project or leading an enterprise development team, BEM methodology provides a solid foundation for CSS organization that will serve you well as your projects evolve and grow.
Visit Valorem Reply's solutions page to learn more about our approach to front-end architecture and how we can help your team implement best practices like BEM methodology in your web development projects.
FAQs
Is BEM still relevant with CSS-in-JS and scoped CSS approaches?
Yes, BEM remains relevant even with modern styling approaches. While CSS-in-JS and scoped CSS solve the problem of style isolation, BEM provides a semantic structure for naming components that helps with readability and maintenance. Many teams combine BEM naming conventions with scoped styling approaches for the best of both worlds.
How do I handle global styles with BEM?
Global styles that aren't tied to specific components (like typography or color utilities) don't necessarily need to follow BEM conventions. You might use a separate naming convention for utilities, such as .u-text-center or .u-margin-large. Alternatively, consider using a framework like ITCSS to organize these global styles separately from your BEM components.
What's the biggest challenge when implementing BEM?
The most common challenge is maintaining team discipline around naming conventions. To address this, create clear documentation, use linting tools to enforce conventions, and conduct regular code reviews focused on BEM implementation. At Valorem Reply, we've developed internal tools that help validate BEM naming consistency across large projects.
How does BEM compare to other CSS methodologies like SMACSS or OOCSS?
BEM is more prescriptive about naming conventions than SMACSS (Scalable and Modular Architecture for CSS) or OOCSS (Object-Oriented CSS). SMACSS focuses more on categorizing CSS rules, while OOCSS emphasizes separation of structure and skin. BEM can actually be used alongside these methodologies, with BEM providing the naming structure while SMACSS or OOCSS influence how you organize and think about your styles.
Can BEM be used for small projects, or is it only for large applications?
While BEM offers more benefits in larger projects, it's valuable for projects of any size. Even in small projects, BEM creates a foundation for maintainable CSS that will help if the project grows. The initial investment in learning and implementing BEM pays dividends as your project scales.
