Working with BEM at Scale

This article explores the challenges and best practices of using the BEM (Block, Element, Modifier) CSS methodology at scale, drawing on insights from experienced developers. The core question addressed is how to effectively manage BEM's complexity in large projects.

The article begins by highlighting a common misconception: over-nesting. While the basic BEM structure (.block__element--modifier) is straightforward, many developers mistakenly extend this to excessive levels (e.g., .block__element__subelement--modifier). The consensus among interviewed developers is to generally limit nesting to one or two levels. Deep nesting reduces readability and maintainability, and often indicates a need for better block scoping or restructuring. One developer suggests using longer, more descriptive element names instead of adding extra nesting levels. Another offers a compelling analogy comparing excessive nesting to rigidly defining a DOM structure in CSS, advocating for a more flexible approach. However, not all developers adhere strictly to this two-level limit; some find that deeper nesting is sometimes necessary.

Proper block scoping is crucial. The article emphasizes starting with the smallest, most self-contained units, avoiding overly broad block definitions that encompass unrelated elements. This approach ensures better modularity and reusability.

Organizing CSS files is another key aspect. Several developers advocate for a one-file-per-block structure, promoting modularity and ease of maintenance. Others combine this with elements of SMACSS, creating a hybrid approach. The article also discusses ITCSS (Inverted Triangle CSS), a methodology that structures CSS based on specificity, explicitness, and reach, offering a structured layering system for managing large CSS projects.

The use of long, descriptive class names is encouraged over cryptic abbreviations to improve code readability and maintainability. The article strongly advises against using Sass's @extend with BEM, preferring a multi-class approach in HTML to maintain a clear relationship between classes and avoid bloating the CSS. This approach allows for greater flexibility and easier modification.

Finally, the importance of CSS linting is stressed to enforce naming conventions and ensure consistency across teams. The article also touches upon the broader Yandex BEM stack, which encompasses tools for JavaScript and templating, but acknowledges that many developers focus solely on the CSS methodology. The conclusion emphasizes the importance of finding a workflow that suits the team and project, combining tools and techniques from various sources. The benefits of well-documented, structured components are highlighted, along with the need to avoid over-automation for better portability.

The article concludes with a frequently asked questions section covering various aspects of BEM, its comparison to other methodologies, and practical tips for implementation and scaling.

The above is the detailed content of Working with BEM at Scale. For more information, please follow other related articles on the PHP Chinese website!