22. What is BEM (Block Element Modifier) and what are its advantages in structuring CSS?

BEM is a CSS class naming methodology that helps create understandable and scalable CSS code structures. BEM divides components into three main parts:

• Block (B): An independent entity that can be reused, e.g., .button.
• Element (E): A part of a block that has no standalone meaning, e.g., .button__text.
• Modifier (M): A variant of a block or element, e.g., .button--primary.

BEM Advantages:

• Readability: Clear and understandable class naming.
• Modularity: Facilitates code reuse.
• Conflict Avoidance: Reduces the risk of naming conflicts.

/* Examples */
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button--primary {
    background-color: green;
}

.button__text {
    font-size: 16px;
}