SmartCodingTips

BEM Naming Convention

BEM (Block, Element, Modifier) is a naming methodology that helps you write clean, maintainable, and scalable CSS by clearly describing the structure and purpose of each class.

1. What is BEM?

  • Block: A standalone entity (e.g., card)
  • Element: A part of a block (e.g., card__title)
  • Modifier: A variation or state (e.g., card--featured)

2. Syntax


.block { }
.block__element { }
.block--modifier { }

This naming pattern avoids deep nesting and makes styles reusable.

3. Example





    
Featured Article

    
Short summary of the content.



            

/* CSS */
.card {
    border: 1px solid #ccc;
    padding: 1rem;
}

.card--featured {
    background-color: #f0f9ff;
}

.card__title {
    font-size: 1.25rem;
    font-weight: bold;
}

.card__description {
    color: #4b5563;
}

4. Benefits of BEM

  • Improves CSS readability
  • Prevents class name collisions
  • Encourages reusable components
  • Works well with large-scale projects and teams

5. Tools & Tips

  • Use consistent naming across all blocks
  • Follow kebab-case or lowercase with hyphens
  • Preprocessors like SCSS can help group styles logically
  • Use BEM along with utility-first CSS (e.g., Tailwind) if needed

Conclusion

BEM is a reliable way to structure CSS in complex projects. By separating block, element, and modifier responsibilities, you reduce confusion and improve collaboration in development teams.

← Previous: DevTools for CSS Next: Performance Tips →