BEM

Lesson in the CSS Roadmap · Stage 33: Responsive typography

Last updated 14 September 2026

What is BEM?

BEM (Block, Element, Modifier) is a CSS naming convention that helps developers create more modular, reusable, and maintainable code. It structures class names to reflect the relationships between different parts of a user interface. This approach makes it easier to understand the purpose of each CSS rule and how it relates to the HTML structure, leading to more organized and scalable stylesheets.

Study this in the interactive course See the whole CSS roadmap

Free resources to learn BEM

Official docsBEM
ArticleBEM 101
VideoWhy I use the BEM naming convention for my CSS

BEM: common questions

Can I learn BEM in Hindi?

This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain BEM in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.

Is this BEM tutorial for beginners?

It is lesson 102 of 104 in the free CSS roadmap, in stage 33, Responsive typography. If you are new to CSS, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.