@MelvinAguilar
Posted
Hi @Kamasah-Dickson, I really like your solution! 👋
I have been reading about how to use SASS with the BEM naming convention. I have a suggestion that could help. I also see that you have experience in web design, so it's a humble opinion.
It seems to me that SASS provides a lot of power. However, nesting many selectors could be detrimental if you want to identify which selector is more specific when setting styles.
For example, if I want to update the font size of your header in ".price" with a media query, due to the specificity of <h2>, this selector would be the most specific:
.card .card_img img .card_details .pricing .price h2 {
font-size: 2rem;
}
With BEM example:
.card {
&__price h2 {
font-size: 2rem;
}
}
It is an opinion. If you wish, I can delete the comment sorry for my English
I hope this helps you
Marked as helpful
@Kamasah-Dickson
Posted
@MelvinAguilar I really appreciate your opinion well I forgot about using BEM for components like this. Thanks @MelvinAguilar