BEM: The Yandex CSS Methodology that Revolutionized Front-End

In the early 2010s, as web applications grew increasingly complex and front-end development teams expanded, managing CSS posed major challenges regarding maintainability, reusability, and collaboration. Within this context, the front-end team at Yandex—the Russian tech giant often dubbed the "Russian Google"—conceptualized and implemented a robust methodology: BEM (Block, Element, Modifier).

The Origin at Yandex: Between 2010 and 2012

Faced with the need to build and maintain complex user interfaces for services like search engines, mapping, and email, Yandex required a systematic approach to organize its CSS codebase. The BEM methodology grew out of this pragmatic requirement, allowing developers to work on massive projects without letting the code turn into an unmanageable tangle of conflicting, hard-to-modify styles.

The concept was formalized and documented by Yandex's front-end development team between 2010 and 2012 before gaining widespread popularity and being adopted by a broad community of developers around the world.

The Core Principles of BEM

BEM proposes a CSS class naming strategy built around three distinct entities:

• Block: A standalone, independent, and reusable component. It can be any meaningful UI entity, such as a button, menu, header, or footer. Block names are typically singular or plural nouns representing the entity (e.g., .button, .header).
• Element: A part of a block that cannot be used independently. Elements are semantically tied to their parent block. Their names are created by appending two underscores to the block name (e.g., .button__icon, .header__logo).
• Modifier: A flag or state that alters the appearance or behavior of a block or element. Modifiers are used for specific variations. Their names are formed by appending two hyphens to the block or element name (e.g., .button--primary, .button__icon--large).

Why Was BEM Adopted?

The adoption of BEM by Yandex, and subsequently by the broader web community, can be attributed to several key advantages:

• Modularity and Reusability: Every block is independent, making it easy to reuse across different parts of an application or even across separate projects.
• Predictability: Strict naming conventions make code easier to read and understand. Developers can infer a class's purpose and scope simply by reading its name.
• Scalability: BEM makes it possible to manage vast CSS codebases without generating naming conflicts or specificity issues, which is critical for large-scale applications.
• Streamlined Collaboration: With clear rules in place, teams can collaborate far more efficiently, mitigating the risk of overriding others' work or introducing unwanted side effects.
• Maintainability: The clear structure and low selector specificity of BEM selectors make modifications and debugging simpler and less risky.

The BEM Legacy

Although other CSS methodologies and paradigms have emerged since (such as CSS Modules, Styled Components, or Tailwind CSS), BEM remains a fundamental benchmark and a major source of inspiration. Its contribution to structuring CSS and solving scalability issues in large front-end projects is undeniable, leaving a lasting mark on modern web development practices.