@PrashanthBalakrishnan
Posted
Try using BEM naming model for your class names. use this link to get more information https://css-tricks.com/bem-101/.Also use semantic HTML for better SEO.
@devpullcode
Posted
"Hello, @PrashanthBalakrishnan! I would recommend using the BEM (Block Element Modifier) methodology, which will help you write more modular and reusable code. 👨💻
Considering the card
element, you could have named it card-container
or card-wrapper
. Everything inside this container element could be named as the card
block, followed by different elements, for example: card__img-container
, card__img-mobile
, card__content
, or card__content-information
. The key point is not creating a new block level within the same container; the container will always be the block, and all the content will be elements or element modifiers. In other words, instead of creating a new block named information
within card__information
, you can use card
as the block and information__category
as the element. If the latter had a modifier, for instance, when hovering over it and changing its color to blue, you could add a new class with the modifier card__information__category--active
, and this class would apply the styles for :hover
. 🎨
I hope this explanation helps you improve your class names. I'm looking forward to seeing your code updated with the new classes following the BEM methodology.
Here is the link to the BEM website for more information: https://getbem.com. 🚀"