Introduction
In today's rapidly growing web development landscape, maintaining a scalable and maintainable CSS architecture becomes a challenge. The Block, Element, Modifier (BEM) methodology offers a strategic solution to this issue. BEM facilitates the organization of CSS code, making it more readable, maintainable, and scalable. In this article, we will explore the core concepts of BEM naming conventions and examine several well-established CSS frameworks that implement BEM in their architecture.
Understanding BEM (Block, Element, Modifier) Naming Conventions
What is BEM?
BEM stands for Block, Element, and Modifier, and is a front-end development methodology designed to simplify and standardize CSS naming conventions. BEM originated at Yandex, a leading Russian search engine, in 2005. The primary goal was to create a modular, scalable, and maintainable approach to CSS structures, outlining how to name CSS classes and how to organize files accordingly.
BEM revolves around rearranging CSS code into small, reusable modules that are easy to identify and comprehend. This modular approach allows developers to modify specific parts without affecting the rest of the codebase.
BEM Naming Conventions
The BEM naming convention follows a structure that consists of three parts: Block, Element, and Modifier. Each part plays a crucial role in defining the purpose and structure of a CSS class name.
- Block: The block is a standalone entity that represents a high-level component of a user interface. For example, a block could be a button, a form, or a navigation menu. In BEM, block names are typically written in lowercase and use hyphens to separate words.
/* Block example */
.navigation-menu { }
- Element: The element is a part of a block that performs a specific function. Elements are dependent on their block, meaning they cannot exist without the block they belong to. In BEM, element names are separated from the block using two underscores (__).
/* Element example */
.navigation-menu__item { }
- Modifier: The modifier is a flag representing a variation or state of a block or element. In BEM, modifier names are separated from the block or element using two hyphens (--).
/* Modifier example */
.navigation-menu--hidden { }
.navigation-menu__item--active { }
Why Use BEM?
BEM brings various benefits to CSS development by addressing the challenges that developers encounter in complex projects. Some key advantages include:
- Improved code readability and maintainability: BEM naming conventions provide a systematic approach to organizing your CSS code, making it easier to understand the structure and relationships between components.
- Facilitating teamwork and collaboration: BEM enables developers to work on different parts of the project without the risk of conflicts or overriding each other's code. This is particularly beneficial for projects that involve multiple teams and developers working in parallel.
- Efficient CSS performance: By following the BEM naming conventions and methodology, you write more modular and less-specific CSS. As a result, you reduce the complexity of your stylesheets which translates to better CSS performance.
CSS Frameworks Implementing BEM Naming Conventions
Several popular CSS frameworks incorporate the BEM naming convention to various degrees. Let's explore some of these frameworks and how they implement BEM.
Bootstrap
Bootstrap is arguably the most popular CSS framework in the web development community. It offers an extensive collection of pre-built UI components and a responsive grid system. Bootstrap 4, the latest major version, has introduced BEM naming conventions, albeit partially.
Although the Bootstrap team has adopted BEM for some components, they chose to keep existing class names for the sake of backward compatibility. Therefore, if you're using Bootstrap, you may come across a mix of BEM-style classes and non-BEM classes. Nevertheless, understanding BEM concepts will still benefit you while working with Bootstrap.
Examples of BEM-style classes in Bootstrap:
<!-- Block: Card -->
<div class="card">
<!-- Element: Card header -->
<div class="card__header">
Card Header
</div>
<!-- Element: Card body -->
<div class="card__body">
Card Content
</div>
<!-- Element: Card footer -->
<div class="card__footer">
Card Footer
</div>
</div>
Foundation with BEM
Foundation is another popular CSS framework that provides a versatile collection of reusable UI components and a responsive grid system. Originally, Foundation did not follow the BEM naming convention. However, a community-driven Foundation BEM extension is now available which transforms Foundation class names into BEM-style class names.
By incorporating the Foundation BEM extension, you can enjoy the modularity and readability benefits of BEM while working with the Foundation framework.
Examples of BEM-style classes in Foundation with BEM:
<!-- Block: Grid -->
<div class="grid">
<!-- Element: Grid cell -->
<div class="grid__cell">
Grid Cell
</div>
<!-- Element: Grid cell with Modifier: Small 6 columns -->
<div class="grid__cell grid__cell--small-6">
Grid Cell | Small 6
</div>
</div>
Yandex UI
Yandex UI is a set of React components based on the BEM methodology created by the BEM inventors themselves – Yandex. As such, Yandex UI strictly follows BEM naming conventions throughout the framework. With a wide range of UI components and their corresponding BEM class names, Yandex UI is an ideal choice for those who want to work exclusively with the BEM methodology.
Examples of BEM-style classes in Yandex UI:
<!-- Block: Button -->
<button class="button">
Button
</button>
<!-- Block: Button with Modifier: Type submit -->
<button class="button button--type-submit">
Submit Button
</button>
<!-- Block: Input -->
<div class="input">
<!-- Element: Input control -->
<input class="input__control" type="text" />
<!-- Element: Input label -->
<label class="input__label">
Input Label
</label>
</div>
Suit CSS
Suit CSS is a lightweight and flexible CSS framework that follows BEM-inspired naming conventions. While not strictly conforming to the standard BEM methodology, Suit CSS adopts a similar approach to provide more organized and maintainable CSS structures.
Examples of BEM-style classes in Suit CSS:
<!-- Block: Button -->
<button class="Button">
Button
</button>
<!-- Block: Button with Modifier: Type warning -->
<button class="Button Button--warning">
Warning Button
</button>
<!-- Block: FormField -->
<div class="FormField">
<!-- Element: FormField control -->
<input class="FormField-control" type="text" />
<!-- Element: FormField label -->
<label class="FormField-label">
FormField Label
</label>
</div>
Honorable Mentions: Other CSS Methodologies and Frameworks
While BEM is an excellent method to organize and maintain your CSS code, it's worth mentioning other methodologies that developers use to improve their CSS architecture. Let's explore some of these approaches and briefly discuss their similarities and differences with BEM.
SMACSS (Scalable and Modular Architecture for CSS)
Created by Jonathan Snook, SMACSS is a CSS methodology that aims to provide a more organized and modular structure for stylesheets. SMACSS classifies styles into five categories: Base, Layout, Module, State, and Theme. This classification fosters the organization and maintainability of CSS code.
While both BEM and SMACSS strive to enhance the maintenance and scalability of CSS, SMACSS does not enforce a strict naming convention like BEM. Instead, it emphasizes the categorization of styles and offers guidelines for writing CSS selectors effectively.
OOCSS (Object-Oriented CSS)
Developed by Nicole Sullivan, OOCSS is a CSS methodology based on object-oriented programming principles. OOCSS divides stylesheets into reusable objects or modules. Its primary goal is to promote the separation of structure and presentation, making CSS more maintainable and efficient.
Similar to BEM, OOCSS focuses on creating modular CSS components. However, OOCSS does not dictate a specific naming convention like the Block-Element-Modifier structure applied in BEM.
Atomic Design
Coined by Brad Frost, Atomic Design is a design system that divides UI components into five hierarchical levels: Atoms, Molecules, Organisms, Templates, and Pages. Each level represents a progressively more complex design element, making it easier to understand and manage the UI components.
Atomic Design does not directly address the naming conventions of CSS classes like BEM does, but it provides a thought process for designing UI components in a hierarchical and maintainable way, similar to BEM's approach for organizing CSS structures.
Choosing the Right CSS Framework and Naming Convention for Your Project
Selecting the most suitable CSS framework and naming convention is crucial to ensure maintainability and scalability in your web development project. Here are some factors to consider when making your decision:
Project Requirements
Evaluate your project needs, including the desired scope, scalability, and complexity. Consider whether a particular framework or naming convention would mesh well with your existing technology stack or provide additional benefits to your project.
Developer and Team Preferences
Personal preferences and familiarity with different frameworks and naming conventions may influence your choice. Assess whether adopting a new methodology would be easy for your team, or if sticking to what you're used to would be more favorable.
Performance and Optimization
Consider the performance overhead and potential optimization options that each framework offers. Examine any trade-offs involved when selecting a framework and make a decision based on what best aligns with your project goals and constraints.
By meticulously weighing these factors, you can make an informed decision and choose the most appropriate CSS framework and naming convention for your project, yielding a more maintainable, scalable, and robust codebase in the long run.
Conclusion
Throughout this article, we've delved into the importance of BEM naming conventions for creating maintainable and scalable CSS architecture. We've also examined a selection of CSS frameworks that implement BEM naming conventions to varying degrees, including Bootstrap, Foundation with BEM, Yandex UI, and Suit CSS.
Furthermore, we explored alternative CSS methodologies such as SMACSS, OOCSS, and Atomic Design. Appreciating the differences between these methodologies and BEM can help you make an informed decision when choosing the right framework and naming convention for your project.
In conclusion, understanding BEM principles and related frameworks can be invaluable to web developers seeking scalable and maintainable CSS solutions. Therefore, carefully consider your project requirements, your team's preferences, and the performance implications of each option to determine the best approach for your specific needs.
Frequently Asked Questions
What is the difference between BEM and SMACSS?
While both BEM and SMACSS focus on creating more maintainable and scalable CSS structures, there are some key differences. BEM enforces strict naming conventions (Block-Element-Modifier) for organizing CSS code, whereas SMACSS emphasizes categorizing styles into five types (Base, Layout, Module, State, and Theme) and provides guidelines on writing CSS selectors effectively. BEM is more concerned with the naming of CSS classes, while SMACSS is about the organization of stylesheets.
How do I refactor my existing project to use BEM naming conventions?
Refactoring your existing project to adopt BEM naming conventions can be accomplished gradually, following these steps:
- Analyze your current CSS code, identify the high-level components (blocks), their sub-components (elements), and variations (modifiers).
- Rename existing CSS classes following the Block-Element-Modifier naming convention. Remember to also update the relevant HTML and JavaScript code accordingly.
- Organize your codebase by creating separate folders or files for each block, making it more maintainable and modular.
- If needed, adjust your build tools, such as CSS preprocessors or bundlers, to accommodate the new BEM naming conventions and file structure.
Are there tools for automatically converting my CSS to BEM?
There are no tools that can reliably and fully convert your existing CSS code into BEM conventions automatically. However, some utilities, such as CSS Comb, can help improve the organization and formatting of your CSS code. Ultimately, manually analyzing and refactoring your CSS code to adhere to BEM conventions will yield the most accurate and maintainable results.
Can I use BEM with CSS preprocessors like SCSS or LESS?
Yes, BEM naming conventions can be used in conjunction with CSS preprocessors like SCSS or LESS. The use of preprocessors can further enhance the modularity and maintainability of your CSS code. For example, preprocessors allow the use of variables, mixins, and nesting, providing additional benefits when combined with BEM principles.
Can BEM be combined with other CSS methodologies?
Absolutely. BEM can be blended with other CSS methodologies like SMACSS, OOCSS, or Atomic Design to create a tailored approach that meets the specific requirements of your project. When combining methodologies, focus on the strengths of each and adapt them to fit your project's needs effectively. Mixing methodologies can help you achieve a highly scalable and maintainable CSS architecture, tailored to your unique requirements.