Hi
This looks good and the html is spot on!
I recommend some changes to how you are writing scss.
You are nesting very heavily at the moment. As well as making it very hard to read, you're really increasing specificity there and it is not recommended.
Instead, try writing your scss where you only nest pseudo states, pseudo selectors, media queries or direct children selectors.
// eg. Instead of this
.my-class {
// styles
.child-class {
p {
...
}
}
}
// Try this
.my-class {
// styles
@media-query... {
...
}
}
.child-class {
...
}
I can't understand what you're doing with the grid and position relative I'm afraid. The whole point of css grid is you create the grid template and let that handle the layout, sizes and spacing of the grid children. It sounds like you are breaking children out of their grid position unnecessarily. Create the grid and place the cards on it where they need to be.
Last pointer - make sure you put the font size on the body in rem not px. Never put font size in px as it cannot scale for people with different zoom settings.
I hope this helps.
@madegilangaditya
Posted
@grace-snow thanks for your suggestion grace, I will fix my SCSS for future challenge. I use position relative because I didn't figure out how to make the grid column position more to the top.
Learn more how to use grid. You need to plan out the grid and set up rows and columns. Maybe look into grid-template areas too you might find that easier
@madegilangaditya
Posted
@grace-snow thanks grace I will look it up..
@RocTanweer
Posted
@grace-snow Hello, how deep nested should be in sass? And what to do if it goes any deeper?
I totally follow BEM and 4-5 level nesting is very common in my code...
Please help me
@RocTanweer I rarely go deeper than 1-2 levels. I only nest media queries and pseudos usually.
Even if you follow an approach of a parent class with element selectors, there is no good reason to nest deeper than 3 levels I think
