Over the last couple of days, I revisited two of my earlier HTML & CSS practice projects — this time with a focus on scalability, semantic structure, and maintainable CSS using the BEM (Block Element Modifier) naming convention.
🛠️ What I Coded:
Stats Preview Card Component -- Attempt 2:
Live Demo: Link
GitHub Repo: Link
- Refactored layout and media queries for better responsiveness.
- Set new breakpoint at max-width: 1000px and added another at max-width: 515px for tighter control on smaller screens.
- Focused on centralized global styles using :root for consistent spacing, typography, and colors.
Social Links Profile -- Attempt 2:
Live Demo: Link
GitHub Repo: Link
- Practiced custom transition effects for hover states.
- Switched entirely to BEM (Block Element Modifier) naming convention for scalability and structure.
🎓 What I Learned:
Based on my research online, I learned that:
- BEM improves clarity in larger projects by providing predictable structure and naming.
- CSS becomes easier to debug and refactor when layout and styling are modularized.
- BEM can get tricky when components have deep nesting or multiple structural layers. I reminded myself that BEM doesn’t need to replicate every level of HTML nesting. Instead, think of BEM as a way to create reusable, modular blocks.
For example:
For instance, in this example, the "card" block contains elements like "card_title" and "carddescription". However, when a section is more complex or meaningful on its own—like the statistics section—I separated it into its own block called "stats-container" with its own elements such as "stat", "statvalue", and "stat_label". This keeps the code organized, modular, and easier to maintain.
💡 Reflections:
Going through the same components for a second time made me realize how much structure matters.
My earlier attempts were functional, but not scalable. Applying BEM and global tokens forced me to think like a system designer — not just someone writing CSS line by line.
Top comments (0)