Scribd
Upload
37 views2 pages

Block Element Modifier

BEM is a CSS naming convention that promotes clean, scalable, and maintainable code for large projects. It consists of three main components: Block (a standalone component), Element (a part of a block), and Modifier (a flag to change appearance or behavior). This structured approach helps in organizing CSS classes based on their roles in the user interface.

Uploaded by

hadikhan134000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views2 pages

Block Element Modifier

BEM is a CSS naming convention that promotes clean, scalable, and maintainable code for large projects. It consists of three main components: Block (a standalone component), Element (a part of a block), and Modifier (a flag to change appearance or behavior). This structured approach helps in organizing CSS classes based on their roles in the user interface.

Uploaded by

hadikhan134000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

BEM is a naming convention

BEM is a naming convention in CSS that helps you write clean, scalable, and
maintainable code—especially for large projects.

✅ What is BEM?
BEM stands for:

●​ B – Block
●​ E – Element
●​ M – Modifier

It’s a structured way to name CSS classes based on the role of the component in
the UI.

🧱 1. Block
A standalone component that has meaning on its own.

<div class="button">Click me</div>

.button {
padding: 10px;
}

🧩 2. Element
A part of the block that has no standalone meaning; it depends on the block.

Syntax: block__element

<div class="card">
<div class="card__title">Title</div>
<div class="card__content">Some content</div>
</div>
.card__title {
font-size: 20px;
}

.card__content {
color: gray;
}

🎨 3. Modifier
A flag on a block or element used to change appearance, behavior, or state.

Syntax: block--modifier or block__element--modifier

<div class="button button--primary">Save</div>


<div class="button button--disabled">Save</div>

.button--primary {
background-color: blue;
}
.button--disabled {
opacity: 0.5;
}

You might also like