Submitted 3 months ago

Responsive four card feature using Grid and Scss

sass/scss

Kumani Kidd•170

@amancalledkidd

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Using grid for the first time, I had previously mainly used flexbox. I will use it more often in the future, its a useful tool.

What challenges did you encounter, and how did you overcome them?

I had recently been learning about cube-css after watching the link provided in a previous section. However I found it hard to use as I didn't have a full understanding. I have applied some of the best practices but I ahve a lot more to learn.

Also find it challenging to know the best practices of semantic HTML, overcame this through reading more and trial and error.

What specific areas of your project would you like help with?

Best practices for naming classes?

Is my use of Scss nesting correct?

Any suggestions for improving this solution?

Code

Please log in to post a comment

Community feedback

P
Gabe•320
@gabei
Posted 3 months ago
Hey nice job!

To answer your question about SCSS nesting:

Usually the benefit of nesting in SCSS is the ability to append class names under the parent element. This is especially apparent when using a CSS methodology like BEM.

For instance, if you had a paragraph tag with a .card__text class listed under your .card element, you might wright something like:
```
.card {
   border: 1px solid black;

   &__text {
      padding: 2rem;
   }
}
```
This would output to:
```
.card { styles here }
.card__text { styles here }
```
This can allow you to sort your CSS into a module-like arrangement, where all associated code is bundled together under a .card element at the top.

Expanding on that idea is then quite easy:
```
&__text {
   padding: 2rem;
   &--bold {
     font-weight: 800;
   }
}
```
outputs to:
```
.card__text--bold { font-weight: 800 }
```
And so on and so forth.

I hope this helps - happy coding!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord