2. Foundations
3. BEM methodology

BEM methodology

Amazium uses the BEM (Block Element Modifier) methodology to create a consistent and scalable CSS architecture. This approach ensures clear structure, predictable naming, and easier maintenance across components.

Blocks, Elements & Modifiers

BEM organizes styles into blocks, elements, and modifiers, each with a specific role in structuring and extending UI components.

1. Block

   Blocks are standalone components that define reusable parts of the interface. Each block represents a distinct piece of UI and can be used independently or alongside other blocks.

   <div class="block">...</div>

2. Element

   Elements are parts of a block that depend on their parent for context. They cannot be used independently and are always scoped to a specific block.

   <div class="block">
     <div class="block__element">...</div>
   </div>

3. Modifier

   Modifiers are used to adjust the appearance or state of a block or element, allowing variations without changing the core structure.

   <div class="block block--modifier">...</div>

---

Naming Rules

Blocks use `.block`, elements use `.block__element`, and modifiers use `.block--modifier`. Names should be lowercase and use hyphen separation for readability.

---

All together

Blocks, elements, and modifiers work together to create flexible and maintainable components. The example below shows how a card component is structured using BEM naming conventions.

<div class="card card--width-half">
  <div class="card__body">...</div>
</div>