Master of the universe

August 1, 2023

Youtube

Twitter

Medium

Github

BEM Classes: The Secret to Scalable CSS Naming

Introduction to BEM Classes

In the world of web development, CSS naming conventions play a crucial role in ensuring the maintainability and scalability of stylesheets. One such convention that has gained significant popularity in recent years is the BEM (Block, Element, Modifier) methodology.

BEM was developed at Yandex, a Russian search engine company, as a solution to the challenges faced when managing large-scale web projects. Today, it is widely regarded as a powerful tool for creating scalable CSS naming conventions.

Understanding BEM Methodology

BEM is based on three core concepts: Block, Element, and Modifier. By understanding these concepts and applying them to your CSS naming, you can create a maintainable and scalable stylesheet structure.

Block

A Block is a standalone entity representing a high-level component or a specific section of your website. Examples of Block classes might include .header, .footer, or .button.

When creating Block classes, it's essential to choose descriptive and meaningful names that represent the purpose or function of the component.

.header { ... }
.footer { ... }
.button { ... }

Element

An Element is a part of a Block that has no standalone meaning and is semantically tied to its Block. Examples of Element classes might include .header__logo, .footer__link, or .button__icon.

To create an Element class, use two underscores (__) between the Block name and the Element name.

.header__logo { ... }
.footer__link { ... }
.button__icon { ... }

Modifier

A Modifier is a flag representing a variation or a specific state of a Block or an Element. Examples of Modifier classes might include .button--primary, .header__logo--small, or .footer__link--active.

To create a Modifier class, use two hyphens (--) between the Block or Element name and the Modifier name.

.button--primary { ... }
.header__logo--small { ... }
.footer__link--active { ... }

BEM Classes in Practice

https://www.youtube.com/watch?v=er1JEDuPbZQ&pp=ygULYmVtIGNsYXNzZXM=

Many popular CSS frameworks, such as Bootstrap and Foundation, have adopted BEM methodology to some extent. BEM can also be used alongside other methodologies like OOCSS, SMACSS, and ITCSS, creating a hybrid approach to CSS naming and organization.

For example, consider a simple card component using BEM:

<div class="card">
  <img src="image.jpg" alt="Image" class="card__image">
  <div class="card__content">
    <h3 class="card__title">Card Title</h3>
    <p class="card__description">Card Description</p>
  </div>
  <a href="#" class="button card__button">Read More</a>
</div>

Using BEM in large projects with numerous elements and modifiers can be challenging, but following these best practices can help you maintain readability and maintainability:

Be descriptive and meaningful: Choose clear, descriptive, and meaningful names for your Blocks, Elements, and Modifiers to provide context and make it easier to understand the purpose of each class.
Use shorthand and abbreviations: When dealing with long class names, use shorthand or abbreviations for common Element and Modifier names to reduce verbosity while still conveying meaning. For example, use .btn instead of .button or .hd instead of .header.
Keep BEM structure flat: Avoid deeply nested BEM structures, as they can lead to overly complex class names and reduce maintainability. Instead, try to keep your BEM structure as flat as possible, or consider using a different methodology for cases with deep nesting.
Modularize your CSS: Organize your CSS into separate files or modules, grouping related Blocks, Elements, and Modifiers together. This can make it easier to locate and manage specific components in large projects.
Use BEM with a CSS preprocessor: Leverage CSS preprocessors like Sass, LESS, or Stylus to streamline your BEM workflow. Preprocessor extensions and mixins can help automate class name generation, making it easier to maintain a consistent BEM structure.
Adopt a consistent naming convention: Choose a BEM naming convention (e.g., two underscores for Elements and two hyphens for Modifiers) and stick with it throughout your project. Consistency is key for readability and maintainability.
Document your BEM usage: Provide clear documentation about your BEM naming conventions, structure, and any customizations you've made. This can help other developers understand and maintain your code more easily.
Lint your code: Use a BEM linter like stylelint to enforce BEM naming conventions and catch any deviations from your chosen convention.

BEM Naming Conventions

Standard BEM Naming Conventions

The standard BEM naming convention uses two underscores for Elements and two hyphens for Modifiers, as demonstrated in the examples above. This convention is widely adopted and easy to understand, making it an excellent choice for most projects.

Alternative BEM Naming Conventions

Some developers prefer alternative naming conventions like CamelCase (blockName__elementName--modifierName) or snake_case (block_name__element_name--modifier_name). These conventions can also be effective, but it's important to choose one and stick with it throughout your project for consistency.

Tools and Resources for Working with BEM Classes

Several tools and resources can help you work with BEM classes more effectively:

BEM Linters like stylelint can enforce BEM naming conventions in your code editor.
CSS preprocessor extensions like Box-Of-Hats BEM, can streamline the BEM class creation process.
Online resources like Get BEM and EN BEM can help you learn and master the BEM methodology.

Overcoming Common BEM Challenges

While BEM offers many benefits, it also presents some challenges:

Managing long class names: BEM can result in long class names, which can be difficult to read and maintain. Using shorthand or abbreviations for common Element and Modifier names can help mitigate this issue.
Dealing with deeply nested elements: BEM is not designed to handledeeply nested elements well. To maintain readability and maintainability, consider flattening your structure or using a different methodology for such cases.
Combining BEM with CSS modules and CSS-in-JS: BEM can be used in combination with CSS modules or CSS-in-JS solutions, but additional configuration and customization may be needed to ensure compatibility.
Learning curve: For developers new to BEM, there may be a learning curve involved in understanding and implementing the methodology. However, once grasped, the benefits of BEM typically outweigh the initial learning investment.

Despite these disadvantages, BEM is still a popular and widely used methodology for scalable and maintainable CSS naming. By understanding its limitations and adapting your approach as needed, you can take advantage of BEM's benefits while minimizing its drawbacks.

Conclusion

BEM classes provide a powerful and scalable approach to CSS naming, allowing you to create maintainable stylesheets for projects of any size. By understanding the core concepts of Block, Element, and Modifier, and adopting a consistent naming convention, you can reap the long-term benefits of investing in BEM for your CSS naming.

Frequently Asked Questions

What does BEM stand for?

BEM stands for Block, Element, Modifier. It's a methodology for creating scalable and maintainable CSS naming conventions.

Why should I use BEM for my CSS naming?

BEM provides a clear and consistent naming structure, making your stylesheets easier to understand and maintain. It also promotes modularity and reusability, which can lead to more efficient code.

Can I use BEM with other CSS methodologies?

Yes, BEM can be used alongside other CSS methodologies like OOCSS, SMACSS, and ITCSS, creating a hybrid approach to CSS naming and organization.

What if I don't like the standard BEM naming convention with two underscores and two hyphens?

You can use alternative naming conventions like CamelCase or snake_case for BEM. The key is to choose one convention and stick with it consistently throughout your project for better readability and maintainability.

Are there tools available to help me work with BEM classes?

Yes, there are several tools and resources available, such as BEM linters, CSS preprocessor extensions, and online tutorials, which can help streamline the BEM class creation process and enforce BEM naming conventions.