Submitted 3 months ago

loopstudios-landing-page

toshirokubota•1,320

@toshirokubota

A solution to the Loopstudios landing page challenge

Preview Code

Solution retrospective

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

This is my first attempt with SCSS/SASS and I found it fairly straightforward. Since it makes it easier to write the stylesheet, I feel that I might have become less mindful on clarity, organization, and simplicity on the design. I wanted to use BEM on this project but I am still new to BEM and was not patient enough to stick through the naming convention. Hopefully, on the next project, I will be able to stick through with it.

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

This is my first use of SCSS/SASS. It makes it easier to write the style sheet, but I may be making more verbose and less concise because of that. Any advices/comments/suggestions on my use of SCSS/SASS are highly appreciated.

Code

Please log in to post a comment

Community feedback

P
Habeeb Kareem•690
@olaide-hok
Posted 3 months ago
Great job here.

Your SASS did show consistent variables, typography mixin, responsive design, BEM-like structure, and accessibility.

Some areas to improve on would be to consider
1. Typography Mixin Overuse: The mixin is used for small, one-off styles (e.g., font-size: 14px), which adds unnecessary complexity. You can reserve the mixin for repeated typography patterns (e.g., headings) and use direct properties for one-offs. For example
```
  font-size: 14px;  // Direct property
  @include typography(14px, 'Alata', 400, 14px, 5px);  // Only if reused
}
```
1. Nesting Depth and Specificity: Over-nesting (e.g., header nav .menu) can lead to high specificity and hard-to-maintain code. You can limit nesting to 3 levels and use BEM-like classes for scalability for this particular project. For example:
```
.header {
  &__nav {
    padding: 0 1rem;
  }
  &__menu {
    background: $color-black;
  }
}
```
1. For the hover and focus state on links, you can consider using the ::after pseudo selector and then style it to meet the design. This would give you room to adjust the width dynamically without affecting the text.
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