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!
Subscribe to my newsletter
Read articles from Oyiguh Jordan Anibe directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
