---
# System prepended metadata

title: ARTICLE ON BLOCK ELEMENT MODIFIER by dev_jaytee

---

**Block Element Modifier (BEM) Methodology in Web Development**

Block Element Modifier (BEM) is a naming convention for CSS classes that promotes modularity, scalability, and reusability in web development. It provides a structured approach to organizing and naming CSS classes, making it easier to understand, maintain, and extend your stylesheets.

**Core Principles of BEM**

**Block**
Represents a standalone component or element on the page. It should be self-contained and reusable. Examples include buttons, navigation menus, or forms.

**Element**

Represents a child element of a block. It's specific to the block and has no meaning outside of its parent context. Examples include a button's label, a form's input field, or a navigation menu's item.
**Modifier**

Represents a variation of a block or element, indicating a different state, style, or behavior. Examples include a button's "primary" or "secondary" style, or a form's "disabled" state.
**BEM Naming Convention**
The BEM naming convention follows a specific format:

**Block:** block-name
**Element:** block__element-name
**Modifier**: block--modifier-name

**Example**
Consider a simple button component:

HTML
```
<button class="button">Click me</button>
```
Using BEM, we can add variations and modifiers:

```
<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>
<button class="button button--disabled">Disabled   
 Button</button>
```
**Benefits of Using BEM**
**Modularity:** BEM promotes modularity by encouraging the creation of self-contained blocks. This makes it easier to reuse components and manage styles.

**Scalability:** As your project grows, BEM can help you maintain a consistent and organized structure, making it easier to add new features and styles.

**Reusability:** By following the BEM naming convention, you can more easily reuse components across different parts of your application.

**Readability:** BEM makes your CSS code more readable and understandable, especially for large projects with complex stylesheets.

**Maintainability:** BEM can help you reduce the risk of naming conflicts and make it easier to find and update specific styles.
Additional Considerations

**Nesting:** While BEM doesn't explicitly prohibit nesting, it's generally recommended to avoid deep nesting to maintain a flat structure.

**Specificity:** Be mindful of CSS specificity when using BEM. Avoid overly specific selectors to prevent unintended style overrides.

**Tools:** There are various tools and libraries available to help you implement and enforce BEM in your projects.

By adopting the BEM methodology, you can create more organized, maintainable, and scalable CSS stylesheets, leading to better web development practices.

**RESOURCES**

Online Articles and Tutorials:

CSS-Tricks: https://css-tricks.com/taming-the-cascade-with-bem-and-modern-css-selectors/   
Smashing Magazine: https://www.smashingmagazine.com/2018/06/bem-for-beginners/
A List Apart: https://alistapart.com/blog/topic/css/
CSS-Guideline: https://cssguidelin.es/
Books:

"The Pragmatic Programmer" by Andy Hunt and David Thomas
"CSS Mastery" by Andy Bell
Tools and Libraries:

BEMit: A BEM CSS class generator
SASS-BEM: A SASS mixin for BEM
BEM-CSS: A BEM-compliant CSS framework
BEM Starter Kit: A starter kit for BEM-based projects