@0xabdulkhalid
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your needs that I believe will be of great interest to you.
CSS NAMING CONVENTION 🚫:
- Looks like the naming conventions you used for
css
needs to be better, you can take a look at BEM Naming Convention.
- BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.
- BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.
- BEM helps to avoid naming collisions and specificity issues. For example take a look at your current code where naming collisions can happen which could lead to specificity issues.
.card h1 {
font-weight: 700;
....
}
This can be refactored using BEM Method like this, (I changed h1
to heading
because it's more verbose and readable).
.card__heading {
font-weight: 700;
....
}
- BEM makes it easier to collaborate with other developers on larger projects. By using a shared naming convention and structure, you can ensure that everyone on the team is using a consistent approach to styling, which reduces confusion and errors.
- This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!