Day 12 – Grid Wrap-Up and Diving into BEM

Hey folks

Today marked the end of our CSS Grid journey at Cudose Creative Agency, and we transitioned into something equally important: BEM (Block Element Modifier) – a naming convention that makes CSS clean, readable, and scalable. Let me break it down👇

---Wrapping Up CSS Grid

We began by reinforcing what we learned about Grid yesterday:

Using grid-auto-rows and grid-auto-columns

Nesting grid within grid (subgrids)

Real-world use cases like creating gallery layouts or dashboard structures

This brief revision helped solidify our understanding of CSS Grid before switching gears.

---What is BEM?

BEM stands for:

Block – The standalone entity (e.g., card, nav, button)

Element – A part of the block (e.g., card__title, nav__link)

Modifier – A variation or state (e.g., button--primary, nav__link--active)

BEM promotes clarity, modularity, and reusability in CSS — especially for large codebases or when working in teams.

---BEM Naming Examples

Here’s what it looks like in practice:

<div class="card card--highlighted">

<h2 class="card__title">Welcome</h2>

<p class="card__description">Internship Day 12 Recap</p>

</div>

And corresponding CSS:

.card { ... }

.card--highlighted { ... }

.card__title { ... }

.card__description { ... }

---Why BEM Matters

Consistency: Everyone uses the same naming style

Scalability: Easily add or modify components

Readability: Know what a class does just by reading it

Team-Friendly: Ideal for collaborative coding

Key Takeaways:

Use double underscores __ for elements

Use double hyphens -- for modifiers

BEM works especially well with component-based design systems

---Final Thoughts:

I used to write CSS class names like .title1, .blueButton, or .box2, and things would get messy fast 😅.

But with BEM, I now feel more organized and professional with my code.

Next up? Media Queries and Responsiveness! Stay tuned!