# Activity 20: Research BEM - Block, Element, Modifier - Architercture

* **What is BEM?**:
    
    * BEM is a popular naming convention used in **CSS** to organize code in a **modular** and **reusable** way.
        
    * It stands for:
        
        * **Block**: A standalone entity like a button or menu (.button).
            
        * **Element**: A part of the block that has a specific function (.button\_\_icon).
            
        * **Modifier**: A variation of the block or element (.button--primary).
            
* **Advantages of BEM**:
    
    * Improves **code readability**.
        
    * Encourages **modularity**, making it easy to manage large projects.
        
    * Helps avoid CSS conflicts.
        

Example:

```plaintext
.card {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
}

.card__title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card__description {
  font-size: 1rem;
  margin-bottom: 20px;
}

.card__button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

.card__button--disabled {
  background-color: grey;
  cursor: not-allowed;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727926917653/9be5a439-b1fa-4b95-8f0a-963aa1c37923.png align="center")

Repo: [https://github.com/devken4u/bem-architecture.git](https://github.com/devken4u/bem-architecture.git)