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:

.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;
}

Repo: https://github.com/devken4u/bem-architecture.git