• Home
  • Skills
  • Projects
  • Blog
  • Contact
Resume
Naser Rasouli

Author

Naser Rasouli

Front-End developer - sharing lessons learned, notes, and write-ups from real projects.

GitHubLinkedIn

Last posts

Why console.log After setState Shows the Old Value
2026-02-04•1 min read

Why console.log After setState Shows the Old Value

React batches state updates, so logging right after setState prints the previous value. Here’s why and the right ways to read the fresh state.

Cleanup Functions in useEffect: Stop Leaks Before They Start
2026-02-04•1 min read

Cleanup Functions in useEffect: Stop Leaks Before They Start

A practical guide to writing cleanup in useEffect so you avoid memory leaks, duplicate listeners, and setState on unmounted components.

Frontend Interview Flow: Stages, Signals, and Prep
2026-01-17•1 min read

Frontend Interview Flow: Stages, Signals, and Prep

A frontend interview isn’t just a few HTML/JS questions—it’s a path to gauge web understanding, problem solving, and collaboration. This guide outlines common stages, what interviewers look for, and how to prepare.

BEM Methodology in CSS: predictable naming for clean styles

BEM Methodology in CSS: predictable naming for clean styles

2026-02-18
cssbemnamingfrontendarchitecture

Why BEM?

As frontend projects grow, CSS quickly turns fragile—poor class names cause style collisions, debugging pain, and slow iteration. BEM gives you a predictable naming pattern so components stay isolated and easy to reason about.

What is BEM?

BEM stands for Block, Element, Modifier. Every class name reflects its role and state.

Core pieces

  • Block: A standalone UI piece with its own meaning and styles (card, navbar).
  • Element: A part of the block that relies on it; separated with __ (card__title).
  • Modifier: A variant or state of a block/element, marked with -- (card--featured, card__button--active).

Naming format

block
block__element
block--modifier
block__element--modifier

Practical example

<div class="card card--featured">
  <h2 class="card__title">Card title</h2>
  <p class="card__description">Short description</p>
  <button class="card__button card__button--active">View</button>
</div>

.card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

.card--featured {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.card__title {
  font-size: 1.1rem;
  margin: 0;
}

.card__description {
  margin: 0;
  color: #4b5563;
}

.card__button {
  justify-self: start;
  padding: 10px 14px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
}

.card__button--active {
  background: #2563eb;
}

Benefits of BEM

  • Clear readability—class names show role and state
  • Prevents style bleeding between components
  • Scales well for large, collaborative codebases
  • Easier debugging and tracing UI behavior
  • Encourages repeatable, stable UI patterns

Drawbacks and limits

  • Class names get longer
  • HTML can look busy in small projects
  • Requires team consistency; otherwise benefits disappear

When to use BEM

  • Medium/large projects with many shared components
  • Multi-person teams or codebases expected to grow
  • Component-based architectures (React, Vue, Angular, design systems)
  • When long-term maintenance matters

Quick usage tips

  • Pick meaningful, independent block names—not location-based (card over sidebar-card).
  • Avoid deep nesting in CSS; BEM naming reduces the need for it.
  • Modifiers should change state, not the fundamental structure of the block.

Takeaway

BEM’s predictable naming prevents CSS collisions and keeps styles maintainable. For teams and long-lived projects that value clean, extensible code, it’s a proven, low-friction pattern.