Submitted 6 months ago

Recipe page using BEM and SCSS

Gwenaël Magnenat•1,290

@gmagnenat

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I tried to refactor my code with scss mixins, it helped me spot key elements in the design that can be reused at other places.

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

Code organisation, I've read about the 7-1 architecture that I tried to implement but as sass/scss is updating the import to use and forward, it is working differently then the documentation we can find online. I faced some problems. By the community it seems that the 7-1 architecture is not much used nowadays so I switched back to something simpler with partials for variables and mixins.

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

Code organisation. I start to see how to be efffective with properties, mixins etc but I still feel it's a bit of a mess. there must be some better way to organise everything.

Community feedback

Dylan de Bruijn•3,230
@DylandeBruijnPosted 5 months ago
Hi @gmagnenat,

Congratulations on a great looking solution! There are a lot of things I like:

Clear and descriptive class names. Makes it easy for another developer to read your code.

Use of clamp() to make your font-size responsive.

Use of semantic HTML elements.

Great use of reusable pieces of CSS.

A bit of friendly constructive feedback:

Which problems did you face in relation to SASS / SCSS? You are right that nowadays import has been replaced by use and forward. The 7 - 1 architecture is still being used but I would see it as a boilerplate. For smaller projects like this it's overkill. I would suggest just breaking up your stylesheet in partials as you see fit. For the newbie projects I used a root.scss, base.scss and reset.scss. My general styling was in my style.scss.

What about your code organisation specifically feels like a mess? I would be happy to give you some feedback on that because it's something I strive to improve as well.

I hope you find my feedback helpful, I would appreciate it if you could mark my comment as helpful if it did.

Happy coding!
Marked as helpful
0
Gwenaël Magnenat•1,290
@gmagnenatPosted 5 months ago
Hi @DylandeBruijn and thank you for checking my solution !

It's funny I was just working on it to refactor some parts. The scss structure is simple with

main.scss

_variables.scss

_resets.scss

_mixins.scss

I refactored part of the styles focusing on lower specificity. It's already much easier to navigate in the sass file and quickly debug instead of to much nesting.

I also updated the table using <th> it was missing in my solution.

Thanks a lot for your constructive feedbacks.

Cheers !
1
Dylan de Bruijn•3,230
@DylandeBruijnPosted 5 months ago
Hiya @gmagnenat,

I'm glad to hear that you found a structure you are happy with!
0

Please log in to post a comment

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